按子元素 - jQuery 的数据 ID 对 li 进行排序

Sort li by data-id of child element - jQuery

本文关键字：li 排序 ID 数据 元素 jQuery      更新时间：2023-09-26

所以我正在尝试按每个<li>中子元素的data-id属性对无序列表进行排序。如何定位此元素以按其值排序？

这是我当前的代码：

    $("#sort_popularity").live("click", function() {
        var listitems = list.children('li').get();
        listitems.sort(function(a, b) {
            var compA = $(a).("#subject_popularity");
            var compB = $(b).("#subject_popularity");
            return compA < compB;
        });
        $.each(listitems, function(index, item) {
            list.append(item); // (List is defined elsewhere in my code)
        });
    });

.HTML：

<a href="#" id="sort_popularity">Sort</a>
<ul>
    <li><span id="popularity" data-id="10">10</li>
    <li><span id="popularity" data-id="20">20</li>
    <li><span id="popularity" data-id="5">5</li>
</ul>

// for ASC.
var lis = $('ul li');
lis.sort(function(a, b) {
    return parseInt($('span', a).data('id'), 10) > parseInt( $('span', b).data('id'), 10);
});
$('ul').html(lis);

和

// for DESC.
var lis = $('ul li');
lis.sort(function(a, b) {
    return parseInt( $('span', a).data('id'), 10) < parseInt( $('span', b).data('id'), 10);
});
$('ul').html(lis);

注意

更改 span s 的 id，多个span没有相同的id并关闭您的 span 标签（可能是拼写错误）。

相关文章：