Question

我有一个列表，我需要根据类名进行排序。

活跃的应该在顶部，没有类的应该在中间，而sm类应该在底部。

此外，该清单还应依赖于alfabetical。

得到这个结果的最佳观察点是什么？

<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>

Answer 1

$('.options').each(function () {
    $('.active', this).prependTo(this);
    $('.sm', this).appendTo(this);
});

Answer 2

看起来您实际上不需要移动.sm元素 - 如果您选择正确的方法来修改列表，它们将始终保持在同一位置：

$('.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;
});

Demo。请注意，prepend()方法会移动DOM中的元素（而不是重新创建其副本）。

Answer 3

我不确定您是如何处理.sm项目的，但这会让您完成大部分的排序。

var $options = $('.options'),
    items = $options.find('li').get();

items.sort(function(first, second) {
    var $first = $(first),
        $second = $(second);
    if ($first.hasClass('active') && !$second.hasClass('active')) {
        // Filter .active above everything
        return -1;
    } else if($first.hasClass('sm') && !$second.hasClass('sm')) {
        // Filter sm below everything
        return 1;
    }
    // At this point we know that they have the same class so compare the text
    return $first.find('label').text() < $second.find('label').text() ? -1 : 1;
});

// Reorder the dom
$options.html(items);

jQuery在类名上排序列表项

3 个答案: