Question

我有以下HTML

<ul class="aa-checkbox-list aa-tick_group_test-list">

   <li data-aa-position="1" data-aa-checked="1" data-aa-name="B"><label>
  <input class="custom-control-input" name="some_tick" type="checkbox">
</label></li>


   <li data-aa-position="2" data-aa-checked="1" data-aa-name="A"><label>
  <input class="custom-control-input" name="some_tick2" type="checkbox">
</label></li>


<li data-aa-position="3" data-aa-checked="0" data-aa-name="D"><label>
  <input class="custom-control-input" name="some_tick4" type="checkbox">
</label></li>


<li data-aa-position="4" data-aa-checked="0" data-aa-name="C"><label>
  <input class="custom-control-input" name="some_tick3" type="checkbox">
</label></li>

</ul>

以下jQuery：

function tick_group_test__sort(){
    $(".aa-tick_group_test-list li").sort(sort_li).appendTo('.aa-tick_group_test-list');

    function sort_li(a, b) {
        var x = ($(a).data('aa-checked') < $(b).data('aa-checked')) ? -1 : ($(a).data('aa-checked') > $(b).data('aa-checked')) ? 0 : 1;
        return x;
    }
};

我首先尝试按照降序顺序对“aa-checked”进行排序，因此包含已检查输入的元素位于顶部

然后对于已检查的（1），按字母顺序对它们进行排序，对于未选中的（0），按“aa-position”对它们进行排序

尝试了几个小时，不能为我的生活搞清楚

Answer 1

您正在寻找此sort回调函数：

function sort_li(a, b) {
    return $(b).data('aa-checked') - $(a).data('aa-checked')
        || ($(a).data('aa-checked') 
              ? $(a).data('aa-name').localeCompare($(b).data('aa-name'))
              : $(a).data('aa-position') - $(b).data('aa-position')
           );
}

jQuery排序列表基于两个值和一个条件

1 个答案: