首页 新闻 会员 周边

美化博客主页无法正常通过Title进行分组 ,当天发布的会混在一起

0
悬赏园豆:20 [已解决问题] 解决于 2024-06-13 09:40

如题,博客页面按照文章标题进行区分,使用如下操作进行分组,但是如果同一天发布的会混杂在一起,无法正常显示,本人愚笨 请园里前辈指教。

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:这几年磕磕绊绊,从开发转到运维,好久不写代码了,现在正在学习其他方面的知识,就想把这个博客再拾起来当作云笔记,发现样式变了很多,由于页面太二次元不敢问公司的同事,于是自己花了几天时间琢磨,实在能力不足,请前辈们指导。

次元宅的我的主页 次元宅的我 | 初学一级 | 园豆:144
提问于:2024-06-12 20:42
< >
分享
最佳答案
0

你的代码大体上是正确的,但是在处理多个文章标题时可能会有些问题。你可以尝试以下代码来确保同一天发布的文章能够正确分组显示:

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 元素中,并且在同一天发布的文章能够正确分组显示。希望这能帮到你!

收获园豆:20
Technologyforgood | 大侠五级 |园豆:6772 | 2024-06-12 21:04

     参考了下您的代码,目前同一天发布的博客分组已经解决了,新问题又出现了,左上角的时间标签为空不过这个应该不难,重新赋值应该就解决了,谢谢。

 

次元宅的我 | 园豆:144 (初学一级) | 2024-06-13 09:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册