3

我有以下 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 AZ 中的项目进行排序。

如果你们中的任何人有任何提示，将不胜感激。

干杯:)

4

3 回答 3

4

您必须对 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));
});

工作样本

于 2012-05-28T01:22:37.370 回答
2

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

首先，我们应该将您的 s 包装<div>到一个更大的容器中。

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

现在，让我们定义一个常量——你想按哪个属性对其进行排序？（这可能是稍后在您的代码中的函数参数）。

var propName = "genre";

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

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<9 中不起作用，但我现在真的懒得处理这个问题。

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

于 2012-05-28T01:35:00.677 回答
0

检查这个野兽：

 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/

于 2014-07-22T13:45:29.207 回答