javascript - 对 jQuery 加载的 div 中的 li 进行排序

Question

我制作了一个 3 种语言的网站，我需要对所有 3 种语言的评论进行排序，以便它们在每种语言的页面上都可见。 http://www.polinapasztircsak.com/guestbook/ 我尝试使用 jQuery .load 方法加载，它可以工作，但问题是它加载 div 中的单独语言(我不知道其他加载方式并附加它)，我无法对 div 之外的注释 li 进行排序。这是代码:

var commEng = $('<div></div>').load('../guestbook/ .comment');
var commHun = $('<div></div>').load('../vendegkonyv/?lang=hu .comment');
var commIta = $('<div></div>').load('../libro-ospiti/?lang=it .comment');

$(".commentlist").empty().append(commEng).append(commHun).append(commIta);

您对如何加载 li 有其他建议吗？我将它们放在同一个 ul 中，然后使用哪种方法或插件用于排序。

Answer 1

您可以尝试使用$.get或任何其他ajax函数来加载评论，然后使用Javascript的sort函数对它们进行排序。代码看起来像这样:

var loaded = 0, 
    sites = 3,
    comments = []; 

function getComments(url){
    $.get(url, function(data){
        comments[loaded++] = ($(data).find('.comment'));
        if(loaded === sites){
            var insert = comments[0];

            for(var i = 1; i < comments.length; i++){
                insert = insert.add(comments[i]);
            }

            $('.commentlist').append(insert.sort(function(a, b){
                var dateA = new Date($.trim($(a).find('.comment-meta:first a').text()).replace('at', '') + ' GMT'), 
                    dateB = new Date($.trim($(b).find('.comment-meta:first a').text()).replace('at', '') + ' GMT');

                return dateB.getTime() - dateA.getTime();
            }));
        }
    });
}

getComments('../guestbook/'); 
getComments('../vendegkonyv/?lang=hu');
getComments('../libro-ospiti/?lang=it');

这将使用 sort() 对通过 ajax 接收的 jQuery 元素进行排序，方法是传入一个函数，该函数将比较从评论元中抓取的评论的日期。另请记住，ul 无序列表中的 div 不是有效的 HTML。