亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

基于數據屬性值的jQuery排序列表

基于數據屬性值的jQuery排序列表

吃雞游戲 2019-10-21 10:09:34
給出以下列表<ul class="listitems">    <li data-position="1">Item 1</li>    <li data-position="2">Item 2</li>    <li data-position="3">Item 3</li>    <li data-position="4">Item 4</li></ul>頁面上有一些功能,可以使這些項目改變位置。例如,他們可能會進入以下狀態(僅作為示例,訂單可以是任何東西):<ul class="listitems">    <li data-position="3">Item 3</li>    <li data-position="2">Item 2</li>    <li data-position="1">Item 1</li>    <li data-position="4">Item 4</li></ul>我正在尋找一個小的功能來重置訂單。到目前為止,我有以下內容:function setPositions(){    $( '.listitems li' ).each(function() {        var position = $(this).data('position');        $(this).siblings().eq(position+1).after(this);    });}但是它不能正常工作。我究竟做錯了什么?附加條件是列表的順序可能沒有更改,因此該功能也必須在這種情況下起作用。
查看完整描述

3 回答

?
偶然的你

TA貢獻1841條經驗 獲得超3個贊

擴展Rohan的答案,如果您希望此方法適用于多個列表而不只是一個列表,則可以使用以下方法:


HTML:


<ul class="listitems autosort">

    <li data-position="3">Item 3</li>

    <li data-position="2">Item 2</li>

    <li data-position="1">Item 1</li>

    <li data-position="4">Item 4</li>

</ul>


<ul class="listitems autosort">

    <li data-position="5">Item 5</li>

    <li data-position="6">Item 6</li>

    <li data-position="3">Item 3</li>

    <li data-position="4">Item 4</li>

</ul>

Javascript:


$(".listitems.autosort").each(function(){

    $(this).html($(this).children('li').sort(function(a, b){

        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;

    }));

});

這樣,您可以根據需要添加任意數量的列表,并對它們進行排序,只需設置類自動排序即可。


查看完整回答
反對 回復 2019-10-21
  • 3 回答
  • 0 關注
  • 430 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號