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〜9AZのアイテムがジャンルで並べ替えられます。

あなたの誰かが何かヒントを持っているならば、それは大いにありがたいです。

乾杯 ：）

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ソリューションになります。

まず、あなた<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;
});

ソートされたsで構成されるドキュメントフラグメントを作成しましょう<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);

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 に答える