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

标签 javascript jquery html

所以我试图通过每个 <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);

注意事项

更改 spanid,多个 span 没有相同的 id 并关闭你的 span 标签(可能是拼写错误)。

关于javascript - 按子元素的数据 ID 对 li 进行排序 - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11218043/

相关文章:

javascript - Cckeditor:按需显示和隐藏内联工具栏

python - 如何在 django web 应用程序中显示 csv 文件的行数和列数

html - css/html 表格边框

javascript - WebGL - 导入 MD2 模型,纹理问题

javascript - 我如何在 forEach 中使用 set timeout 和 promise/dynamoDB delete?

javascript - Bootstrap : Popover dismiss not working in iOS browser

javascript - 如何从子元素中删除 data-target 和 data-toggle 或禁用元素触发事件?

javascript - jQuery UI 模态对话框在 JSP 上立即关闭

如果输入字段连接到数据库,Javascript 无法获取值?

html - 如何配置 firefox 在某些链接上运行 emacsclientw?