47

私は次のような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/

動作していませんか？

4

4 に答える 4

80

dataset要素のすべてのカスタム属性を格納するプロパティを使用できますdata-*。文字列を使用できる数値に変換する場合は、文字列を返します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プロパティをサポートしていません。すべてのブラウザーをサポートしたい場合は、.data()代わりに jQuery のメソッドを使用できます。

$('.clist div').sort(function(a,b) {
     return $(a).data('sid') > $(b).data('sid');
}).appendTo('.clist');
于 2012-11-21T09:53:44.550 に答える