Question

可能重复：
How may I sort a list alphabetically using jQuery?

我正在使用jQuery来解决有限的CMS设置问题。

我需要按字母顺序对有序列表进行排序，但是我还需要能够在列表顶部放置“特殊”列表项，并再次排序那些以“可选”数值递减的特殊项目。 / p>

例如，如果这是我的原始标记：

<ul>
    <li class=" ">C</li>
    <li class=" ">A</li>
    <li class=" ">B</li>
    <li class=" ">E</li>
    <li class=" ">D</li>
    <li class="3">Z</li>
    <li class="6">Y</li>
    <li class="14">X</li>
</ul>

...我希望jQuery对它进行排序，这样就会产生DOM内容：

<ul>
    <li class="14">X</li>
    <li class="6">Y</li>
    <li class="3">Z</li>
    <li class=" ">A</li>
    <li class=" ">B</li>
    <li class=" ">C</li>
    <li class=" ">D</li>
    <li class=" ">E</li>
</ul>

如果无法按类别值排序或过于复杂，或许我可以使用以下标记结构：

<ul>
    <li><span class="numerical">3</span><span class="alphabetical">B</span></li>
</ul>

有谁知道jQuery代码允许我这样做？我是否需要运行一系列嵌套的“每个”动作以及“insertAfter”和“insertBefore”函数以某种方式比较值？我认为有更好的方法，但我不确定从哪里开始我的研究。

我愿意接受任何建议。我也会在此期间尝试自己解决这个问题，但我仍然是一个jQuery菜鸟，所以我怀疑我会找到合适的代码：）

谢谢！

Answer 1

您需要比较器功能，以及重新排列元素的方法。插件是可用的，前者会为你做后者，虽然如果元素是单亲的唯一孩子，它很容易（见下文）。

对于你的比较器，你需要一些可以给你一对<li>元素的东西，然后告诉你哪个是第一个：

function myCompare(a, b) {
    var cls_a = parseInt(a.classList, 10);
    var cls_b = parseInt(b.classList, 10);

    cls_a = cls_a || -1 ;   // make blank class == -1
    cls_b = cls_b || -1 ;   //   ditto

    if (cls_a === cls_b) {
        var str_a = a.innerText || a.textContent;
        var str_b = b.innerText || b.textContent;
        return str_a.localeCompare(str_b);
    } else {
        return cls_a - cls_b;  // numeric descending sort
    }
}

并重新排列：

var $el = $('li');
var $ul = $('ul');
$el.sort(myCompare);  // from above
$el.each(function() {
    $ul.append(this);
});

.each循环的工作原理是，只需取出每个已排序的项目，然后将其添加到<ul>的末尾 - 当没有剩余时，就完成了。

上述的较短版本是可能的，例如：

$('li').sort(myCompare).appendTo($('ul'));

See this jsfiddle

使用jQuery按字母顺序对列表项进行排序 - 然后按数字对特殊项进行排序

1 个答案: