web-dev-qa-db-ja.com

JQuery-子のinnerHTMLでDIVをソートします

次のようなHTMLがあります。

<div id="sortThis">
<div id="1">Price:<span class="price">20</span><span class="style">blue</span></div>
<div id="2">Price:<span class="price">23</span><span class="style">red</span></div>
<div id="3">Price:<span class="price">10</span><span class="style">red</span></div>
<div id="4">Price:<span class="price">29</span><span class="style">green</span></div>
<div id="5">Price:<span class="price">35</span><span class="style">blue</span></div>
</div>

そして、.priceまたは.styleでソートできるようにしたい

この投稿は私の質問に部分的に答えていると思われます： 属性 'data-sort'に基づいてJqueryでDivを並べ替えますか？

そして、このプラグインは（子の属性を処理できるので）私が必要とすることに近づいていますが、子供のinnerHTMLにまでは及んでいないようです： http://tinysort.sjeiti.com/

このnoobはどんな助けも歓迎します。

jquerysortinghtmljquery-ui-sortable
36
iammatthew2

子の値を使用してプラグインなしでこのソートを直接行うには、次のようなものを使用できます。

function sortUsingNestedText(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

その後、価格によるソートを次のように実行できます。

sortUsingNestedText($('#sortThis'), "div", "span.price");

この関数はパラメーター化されているため、他のdivや異なるソートキーで簡単に再利用できます。

デモは次のとおりです。 http://jsfiddle.net/tc5dc/

Tinysortプラグインを使用する

あるいは、 tinysort プラグイン（問題で言及）が提供する機能を利用できる場合は、プラグインに合わせてdivを動的に拡張できます。

このデモをご覧ください： http://jsfiddle.net/6guj9/

この例では、最初にpriceおよびstyleの値を保持divのデータ属性として追加します。

var sortThis = $('#sortThis').children("div");
sortThis.each(function() {
    var p = $(this);
    p.attr("data-price", p.find("span.price").text());
    p.attr("data-style", p.find("span.style").text());
});

その後、tinysortを使用して、関連する属性を並べ替えることができます。価格による並べ替えは単純に次のようになります。

$("#sortThis>div").tsort({attr:"data-price"});

ソート順とキーの変更は、異なる設定オブジェクトを渡すだけで実行できます。リンクされたデモは、これを行う1つの方法を示していますが、おそらく、ニーズに合ったより良いスキームを思い付くことができます。

69
Shawn Chin

マークされた回答の最初の部分は正しくソートされません。1〜100の数字を使用してテストし、10未満の値を誤って解釈しました。テキスト値とASCIIコード実際の数値の代わりに。

ここでは、ソートする前にparseInt（）を使用してテキスト値を整数に変換しました。

function sortUsingNestedText(parent, childSelector, keySelector) {
var items = parent.children(childSelector).sort(function(a, b) {
    var vA = parseInt($(keySelector, a).text());
    var vB = parseInt($(keySelector, b).text());
    return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
}

それから私たちはそれを同じと呼びます

sortUsingNestedText($('#sortThis'), "div", "span.price");
1
Col.Cook

JqueryプラグインSortContentを使用します。

$('#sortThis').sortContent({asc:true});

ヘルパーを使用して、必要な適切な内容に従ってソートできます。

$('#sortThis').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})

順序を逆にする場合は、falseをascオプションに設定します

もう1つの注意点として、親ではなくdivの子を直接選択できます。これは同じです：

$('#sortThis>div').sortContent({asc:true,helper:function(e){return $(e).find('.price').html()}})

デモ ：

http://jsfiddle.net/abdennour/ytmry/

1
Abdennour TOUMI