使用 jQuery 对 <a> 元素进行排序答案

【问题标题】：Sort <a> elements with jQuery使用 jQuery 对 <a> 元素进行排序
【发布时间】：2013-11-18 19:11:50
【问题描述】：

如何使用 jQuery 对 <a> 元素进行排序？

有可能吗？我认为有正确的方法，但我需要有关如何做的建议。

 <div class="ListOfItems">
    <div class="caption">
<img src="/test1.jpg"/>
    <p>
    <a href="#">
    Name 1
    </a>
    </p>
    </div>

    <div class="caption">
<img src="/test3.jpg"/>
    <p>
    <a href="#">
    Name 3
    </a>
    </p>
    </div>

    <div class="caption">
<img src="/test4.jpg"/>
    <p>
    <a href="#">
    Name 4
    </a>
    </p>
    </div>

    <div class="caption">
<img src="/test2.jpg"/>
    <p>
    <a href="#">
    Name 2
    </a>
    </p>
    </div>
    </div>

我需要类似以下的东西：

 <div class="ListOfItems">
    <div class="caption">
<img src="/test1.jpg"/>
    <p>
    <a href="#">
    Name 1
    </a>
    </p>
    </div>

    <div class="caption">
<img src="/test2.jpg"/>
    <p>
    <a href="#">
    Name 2
    </a>
    </p>
    </div>

    <div class="caption">
<img src="/test3.jpg"/>
    <p>
    <a href="#">
    Name 3
    </a>
    </p>
    </div>

    <div class="caption">
<img src="/test4.jpg"/>
    <p>
    <a href="#">
    Name 4
    </a>
    </p>
    </div>
    </div>

【问题讨论】：

标签： jquery sorting

【解决方案1】：

试试

var els = $('.ListOfItems > .caption').get().sort(function (ob1, ob2) {
    return $.trim($(ob1).find('a').text()).localeCompare($.trim($(ob2)
        .find('a').text()))
})

$.each(els, function () {
    $(this).appendTo('.ListOfItems')
})

演示：Fiddle

【讨论】：

从标题看来，它似乎是 a 元素的文本，而不是应该用于排序的 src 属性的值
我需要按元素排序。

【解决方案2】：

将您的图像放入具有相应 id 的 div 中（即 id="name1"、id="name2" 等），然后使用 jQuery TinySort 插件对 div 进行排序。这是一个类似的问题和解决方案：

How to sort divs according to their id using jQuery?

【讨论】：

【解决方案3】：

检查这个小提琴http://jsfiddle.net/CFYnE/36/

在这里你可以为你想要排序的每个 div 分配 data-sid 并使用内置的排序功能

$('.ListOfItems div').sort(function(a,b){
   return a.dataset.sid > b.dataset.sid
}).appendTo('.ListOfItems')

【讨论】：