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中的项目进行排序。

如果您有任何提示，我们将不胜感激。

干杯：）

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));
});

<强> Working Sample

Answer 2

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

首先，我们应该将您的<div>包装成更大的容器。

<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> s。

组成的文档片段

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);

另外，请注意document.getElementsByClassName在IE＆lt; 9中不起作用，但我现在真的懒得处理这个问题。

小提琴：http://jsfiddle.net/nNXr4/

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/

JQuery按子div排序Divs

3 个答案:

的jQuery