用jQuery按子div排序divs

Question

我有以下一组div，希望能够使用Javascript / JQuery进行排序。

<div class="item">
    <div class="genre">Classical</div>
    <div class="name">Alpha</div>
    <div class="location">London</div>
</div>

<div class="item">
    <div class="genre">Blues</div>
    <div class="name">Bravo</div>
    <div class="location">New York</div>
</div>

<div class="item">
    <div class="genre">Pop</div>
    <div class="name">Charlie</div>
    <div class="location">Paris</div>
</div>

<div class="buttons">
<a href="">Sort by Genre</a>
<a href="">Sort by Name</a>
<a href="">Sort by Location</a>
</div>

我希望能够按照类型/名称/地点字母顺序对项目进行排序。

例如: 如果按类型排序被点击，它将按类型以0-9 A-Z的顺序排序项目。

如果你们有任何建议，我将不胜感激。

干杯 :)

- Storm3y

---

你尝试过什么？(http://mattgemmell.com/2008/12/08/what-have-you-tried/) - j08691

Answer 1

您需要对html做出以下微小更改：

<div id="container">
<div class="item">
    <div class="genre">Classical</div>
    <div class="name">Alpha</div>
    <div class="location">London</div>
</div>

<div class="item">
    <div class="genre">Blues</div>
    <div class="name">Bravo</div>
    <div class="location">New York</div>
</div>

<div class="item">
    <div class="genre">Pop</div>
    <div class="name">Charlie</div>
    <div class="location">Paris</div>
</div>
</div>
<div class="buttons">
<a href="" id="genre">Sort by Genre</a>
<a href="" id="name">Sort by Name</a>
<a href="" id="location">Sort by Location</a>
</div>

jQuery

function sorting(tag) {
    var items = $('div.item').sort(function(a, b) {
        var txt1 = $.trim($('div.' + tag, a).text()),
            txt2 = $.trim($('div.' + tag, b).text());
        if (txt1 > txt2) return 1;
        else return -1;
    });
    return items;
}
$('.buttons a').on('click', function(e) {
    e.preventDefault();
    $('div#container').html(sorting(this.id));
});

示例代码

- thecodeparadox

Answer 2

好的，这是我的纯JS解决方案。

首先，我们应该将您的

元素包装到一个更大的容器中。

<div id = "wrapper">
   <div id = "item">...</div>
   <div id = "item">...</div>
   <div id = "item">...</div> 
</div>

现在，让我们定义一个常量 - 您想按哪个属性进行排序？（这很可能会成为您代码中的函数参数）。

var propName = "genre";

让我们获取所有的 <div> 并将它们放入一个数组中。

var items = document.getElementsByClassName("item");
var itemsArray = new Array();

让我们按照所选属性的文本进行字典排序。

for (var i = 0; i < items.length; i++)
    itemsArray.push(items[i]);

itemsArray.sort(function(a, b) {
    var aProp = a.getElementsByClassName(propName)[0].firstChild.nodeValue;
    var bProp = b.getElementsByClassName(propName)[0] .firstChild.nodeValue;

    if (aProp < bProp)
        return -1;
    else if (aProp > bProp)
        return 1;
    else
        return 0;
});

让我们构建一个文档片段，其中包含按顺序排列的<div>。

var fragment = document.createDocumentFragment();

for (var i = 0; i < itemsArray.length; i++)
    fragment.appendChild(itemsArray[i].clone());

最后，让我们清空 <div id = "wrapper"> 的内容，并用文档片段进行替换。

document.getElementById('wrapper').innerHTML = '';
document.getElementById('wrapper').appendChild(fragment);

另外需要注意的是，在IE<9中，document.getElementsByClassName无法使用，但我现在懒得处理这个问题。

一个演示代码：http://jsfiddle.net/nNXr4/

- Imp

Answer 3

看看这个怪物：

 function sortByCreatedOnAsc(a,b){
     return $(a).find('.created_on').text() > $(b).find('.created_on').text();
 }

 function sortByCreatedOnDesc(a,b){
    return $(a).find('.created_on').text() < $(b).find('.created_on').text();
 }

 function reorderEl(el){
     var container = $('#tasks');
     container.html('');
     el.each(function(){
         $(this).appendTo(container);
     });
 }

 $('#created_on').click(function(){
   if($(this).hasClass("asc")){
     reorderEl($('.task').sort(sortByCreatedOnDesc));
     $(this).removeClass("asc");
     $(this).addClass("desc");
   } else {
     reorderEl($('.task').sort(sortByCreatedOnAsc));
     $(this).removeClass("desc");
     $(this).addClass("asc");
   }
   return false;
});

jsfiddle: http://jsfiddle.net/jKJc3/116/

jsfiddle: http://jsfiddle.net/jKJc3/116/

- Sîrbu Nicolae-Cezar