jQuery在类名称上对列表项进行排序 [英] jQuery sort list items on class name

问题描述

我有一个列表，需要根据班级名称进行排序.

I have a list that I need to sort depending on the class name.

活动人员应该在顶部，没有课程的应该在中间，sm课程应该在底部.

The active one's should be on top, the one's without a class should be in the middle and the sm classes should be at the bottom.

此列表也应按制造顺序排列.

Also the list should de on alfabetical order.

获得此结果的最佳途径是什么?

What is the best wat to get this result?

<ul class="options without-border expandable2">
    <li>
        <label><input type="checkbox" class="filteroption" value="Acer" name="merk"> ACER</label>
    </li>
    <li>
        <label><input type="checkbox" class="filteroption" value="Alcatel" name="merk"> ALCATEL</label>
    </li>
    <li class="active">
        <label><input type="checkbox" class="filteroption" value="Apple" name="merk"> APPLE</label>
    </li>
    <li>
        <label><input type="checkbox" class="filteroption" value="Blackberry" name="merk"> BLACKBERRY</label>
    </li>
    <li>
        <label><input type="checkbox" class="filteroption" value="HTC" name="merk"> HTC</label>
    </li>
    <li class="active">
        <label><input type="checkbox" class="filteroption" value="Huawei" name="merk"> HUAWEI</label>
    </li>
    <li>
        <label><input type="checkbox" class="filteroption" value="LG" name="merk"> LG</label>
    </li>
    <li>
        <label><input type="checkbox" class="filteroption" value="Nokia" name="merk"> NOKIA</label>
    </li>
    <li style="display: none;">
        <label><input type="checkbox" class="filteroption" value="Samsung" name="merk"> SAMSUNG</label>
    </li>
    <li style="display: none;">
        <label><input type="checkbox" class="filteroption" value="Sony" name="merk"> SONY</label>
    </li>
    <li class="sm sm-show" style="display: block;"><a class="showmore" href="#">Alles bekijken</a></li>
    <li class="sm sm-hide" style="display: none;"><a class="showmore" href="#">minder</a></li>
</ul>

推荐答案

似乎您实际上并不需要移动.sm元素-如果您选择正确的修改方法，它们将始终位于同一位置列表:

It doesn't seem that you actually need to move .sm elements around - they will always stay in the same place if you choose the correct approach to modify the list:

$('.options').prepend(function() {
  var elements = [].slice.call(this.querySelectorAll('li:not(.sm)'), 0);
  elements.sort(function(a, b) {
    return (a.className.indexOf('active') === -1) - (b.className.indexOf('active') === -1)
      || a.querySelector('input').value.localeCompare(b.querySelector('input').value)
  });
  return elements;
});

演示 .请注意， prepend()方法会在DOM中移动元素(而不是重新创建其副本).

Demo. Note that prepend() method moves elements in DOM (instead of recreating their copies).

这篇关于jQuery在类名称上对列表项进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！