使用 jQuery 排序 [重复]

Question

我有以下代码。 如何使用 jQuery 按 DESC 顺序对它们进行排序？或者是否可以使用 CSS 进行排序？但我更喜欢 jQuery...

<div class="bf-attr-block-cont">

<div class="bf-attr-filter bf-attr-2 bf-row">
    <span class="bf-cell bf-c-1">
        <input type="checkbox" value="2pm.com" name="attribute_value[2][]" id="bf-attr-2-0">
    </span>
    <span class="bf-cell bf-c-2">
        <label class="bf-attr-val" for="bf-attr-2-0">2pm.com</label>
    </span>
    <span class="bf-cell bf-c-3"><span class="bf-count">4</span></span>
</div>

<div class="bf-attr-filter bf-attr-2 bf-row">
    <span class="bf-cell bf-c-1">
        <input type="checkbox" value="Adidas" name="attribute_value[2][]" id="bf-attr-2-1">
    </span>
    <span class="bf-cell bf-c-2">
        <label class="bf-attr-val" for="bf-attr-2-1">Adidas</label>
    </span>
    <span class="bf-cell bf-c-3"><span class="bf-count">2</span></span>
</div>

<div class="bf-attr-filter bf-attr-2 bf-row">
    <span class="bf-cell bf-c-1">
        <input type="checkbox" value="AJ Morgan" name="attribute_value[2][]" id="bf-attr-2-2">
    </span>
    <span class="bf-cell bf-c-2">
        <label class="bf-attr-val" for="bf-attr-2-2">AJ Morgan</label>
    </span>
    <span class="bf-cell bf-c-3"><span class="bf-count">2</span></span>
</div>              

Answer 1

如果你想在标签上按字母排序，你可以这样做：

$('.bf-attr-block-cont').append($('.bf-attr-block-cont .bf-attr-filter').sort(function(d1,d2){
   var s1 = $('label', d1).text().trim().toLowerCase(), 
       s2 = $('label', d2).text().trim().toLowerCase();
   if (s1===s2) return 0;
   return s1<s2 ? 1 : -1;
}));

Demonstration

如果您想根据 .bf-count 进行排序，请执行以下操作：

$('.bf-attr-block-cont').append($('.bf-attr-block-cont .bf-attr-filter').sort(function(d1,d2){
   var s1 = parseFloat($('.bf-count', d1).text().trim()), 
       s2 = parseFloat($('.bf-count', d2).text().trim());
   if (s1===s2) return 0;
   return s1<s2 ? 1 : -1;
}));

Demonstration

请注意，这些类型不会破坏事件处理程序绑定，这与更改 innerHTML 的幼稚解决方案相反。