web-dev-qa-db-ja.com

データIDを使用したjQueryソート要素

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

<div class="clist">
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=1></div>
</div>

私はそれらを次のようにソートしたいと思います：

<div class="clist">
    <div data-sid=1></div>
    <div data-sid=1></div>
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
</div>

私は次の機能を使用しています：

function sortContacts() {
    var contacts = $('div.clist'), cont = contacts.children('div');

    cont.detach().sort(function(a, b) {
        var astts = $(a).data('sid');
        var bstts = $(b).data('sid')
        return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1;
    });

    contacts.append(cont);
}

期待どおりに動作していません。

最初の実行ではうまく機能していますが、新しい要素を追加するか、data-sid属性は機能しなくなりました。

デモ： http://jsfiddle.net/f5mC9/1/

動かない？

javascriptjqueryhtmlsorting
37
user1834809

要素のすべてのカスタム_data-*_属性を格納するdatasetプロパティを使用できます。文字列を数値に変換する場合は、parseIntまたは_+_演算子。

_$('.clist div').sort(function(a,b) {
     return a.dataset.sid > b.dataset.sid;
}).appendTo('.clist');
_

http://jsfiddle.net/CFYnE/

そして、はい、あなたのコードはここで動作します http://jsfiddle.net/f5mC9/

編集：IE10！以下は_.dataset_プロパティをサポートしていません。すべてのブラウザをサポートする場合は、代わりにjQueryの.data()メソッドを使用できます。

_$('.clist div').sort(function(a,b) {
     return $(a).data('sid') > $(b).data('sid');
}).appendTo('.clist');
_
74
undefined
$('.clist div').sort(function(a,b) {
     return a.dataset.sid > b.dataset.sid ? 1 : -1; //be carefull, string comparaison
}).appendTo('.clist');

または多分

$('.clist div').sort(function(a,b) {
     return parseInt(a.dataset.sid) - parseInt(b.dataset.sid);
}).appendTo('.clist');

sort（）はネガティブ/ポジティブリターンを処理します。

9
devside

JQueryを使用して要素をソートするより一般的な関数：

$.fn.sortChildren = function (sortingFunction: any) {

    return this.each(function () {
        const children = $(this).children().get();
        children.sort(sortingFunction);
        $(this).append(children);
    });

};

使用法：

$(".clist").sortChildren((a, b) => a.dataset.sid > b.dataset.sid ? 1 : -1);
6
tocqueville