如题,博客页面按照文章标题进行区分,使用如下操作进行分组,但是如果同一天发布的会混杂在一起,无法正常显示,本人愚笨 请园里前辈指教。
var article_list=document.getElementsByClassName('day'); function breakSameDayArticles(article_list){ var _i=0; while(_i<article_list.length) { var dayTitle=article_list[_i].getElementsByClassName('dayTitle'); var postTitle=article_list[_i].getElementsByClassName('postTitle'); var postCon=article_list[_i].getElementsByClassName('postCon'); var postDesc=article_list[_i].getElementsByClassName('postDesc'); if(postTitle.length>1) { for (var _j = 0; _j < postTitle.length; _j++) { var day=document.createElement('div'); day.className='day'; day.appendChild(dayTitle.cloneNode(true)); day.appendChild(postTitle[_j].cloneNode(true)); day.appendChild(postCon[_j].cloneNode(true)); day.appendChild(postDesc[_j].cloneNode(true)); article_list[_i].parentNode.insertBefore(day,article_list[_i]); _i++; } article_list[_i].parentNode.removeChild(article_list[_i]); _i--; } _i++; } };
正确显示:
错误显示:
PS:这几年磕磕绊绊,从开发转到运维,好久不写代码了,现在正在学习其他方面的知识,就想把这个博客再拾起来当作云笔记,发现样式变了很多,由于页面太二次元不敢问公司的同事,于是自己花了几天时间琢磨,实在能力不足,请前辈们指导。
你的代码大体上是正确的,但是在处理多个文章标题时可能会有些问题。你可以尝试以下代码来确保同一天发布的文章能够正确分组显示:
javascript
Copy code
var article_list = document.getElementsByClassName('day');
function breakSameDayArticles(article_list) {
var _i = 0;
while (_i < article_list.length) {
var dayTitle = article_list[_i].getElementsByClassName('dayTitle')[0];
var postTitles = article_list[_i].getElementsByClassName('postTitle');
var postCons = article_list[_i].getElementsByClassName('postCon');
var postDescs = article_list[_i].getElementsByClassName('postDesc');
if (postTitles.length > 1) {
for (var _j = 0; _j < postTitles.length; _j++) {
var day = document.createElement('div');
day.className = 'day';
// Clone the dayTitle only for the first post of the day
if (_j == 0) {
day.appendChild(dayTitle.cloneNode(true));
} else {
var emptyTitle = document.createElement('div');
emptyTitle.className = 'dayTitle';
day.appendChild(emptyTitle);
}
day.appendChild(postTitles[_j].cloneNode(true));
day.appendChild(postCons[_j].cloneNode(true));
day.appendChild(postDescs[_j].cloneNode(true));
article_list[_i].parentNode.insertBefore(day, article_list[_i]);
}
article_list[_i].parentNode.removeChild(article_list[_i]);
_i--;
}
_i++;
}
}
// 调用函数进行处理
breakSameDayArticles(article_list);
以下是对代码的解释:
获取文章列表:首先获取所有包含文章的元素,这些元素有一个共同的类名 day。
遍历每个元素:用一个 while 循环遍历所有包含文章的元素。
提取子元素:从每个包含文章的元素中提取子元素,包括 dayTitle、postTitle、postCon 和 postDesc。
处理多个文章标题的情况:
如果一个 day 元素中包含多个 postTitle,则进入处理逻辑。
为每个 postTitle 创建一个新的 day 元素,并将相应的 postTitle、postCon 和 postDesc 添加到这个新的 day 元素中。
只在第一个 postTitle 的新 day 元素中添加 dayTitle,对于后续的 postTitle,添加一个空的 dayTitle 元素,以保持布局一致。
移除原始元素:在处理完所有 postTitle 之后,移除原始的 day 元素。
通过这种方式,可以确保每篇文章都在一个新的 day 元素中,并且在同一天发布的文章能够正确分组显示。希望这能帮到你!
参考了下您的代码,目前同一天发布的博客分组已经解决了,新问题又出现了,左上角的时间标签为空不过这个应该不难,重新赋值应该就解决了,谢谢。