Question

如何使用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>

Answer 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

Answer 2

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

How to sort divs according to their id using jQuery?

Answer 3

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

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

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

排序<a> elements with jQuery</a>

3 个答案: