web-dev-qa-db-ja.com

属性 'data-sort'に基づいてjQueryでdivを並べ替えますか?

複数のdivがある場合:

<div data-sort='1'>div1</div>
<div data-sort='4'>div4</div>
<div data-sort='8'>div8</div>
<div data-sort='12'>div12</div>
<div data-sort='19'>div19</div>

そして、divを動的に作成します。

<div data-sort='14'>div1</div>
<div data-sort='6'>div1</div>
<div data-sort='9'>div1</div>

すべてのdivをリロードすることなく、すでにロードされているdivに順番に並べ替えるにはどうすればよいですか?

画面上のすべてのdivのデータソート値の配列を作成し、新しいdivが収まる場所を確認する必要があると思いますが、これが最善の方法かどうかはわかりません。

61
TaylorMac

この機能を使用する

   $('div').sort(function (a, b) {

      var contentA =parseInt( $(a).attr('data-sort'));
      var contentB =parseInt( $(b).attr('data-sort'));
      return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
   });

新しいdivを追加した直後にこの関数を呼び出すことができます

96

これをjQuery関数にしました。

jQuery.fn.sortDivs = function sortDivs() {
    $("> div", this[0]).sort(dec_sort).appendTo(this[0]);
    function dec_sort(a, b){ return ($(b).data("sort")) < ($(a).data("sort")) ? 1 : -1; }
}

したがって、「#boo」のような大きなdivがあり、そこにすべての小さなdivがあります。

$( "#boo")。sortDivs();

Chromeのバグのため、「?1:-1」が必要です。これがないと、10 divを超えるソートは行われません。 http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

20
PJ Brunet

ここで同じ質問に答えました:

再投稿するには:

多くのソリューションを検索した後、私は jqueryでのソート方法についてのブログ に決めました。要約すると、jquery「配列のような」オブジェクトをデータ属性でソートする手順...

  1. jqueryセレクターを介してすべてのオブジェクトを選択する
  2. 実際の配列に変換します(配列のようなjqueryオブジェクトではありません)
  3. オブジェクトの配列をソートします
  4. domオブジェクトの配列を使用してjqueryオブジェクトに変換します

Html

<div class = "item" data-order = "2"> 2 </ div> 
 <div class = "item" data-order = "1"> 1 </ div> 
 <div class = "item" data-order = "4"> 4 </ div> 
 <div class = "item" data-order = "3"> 3 </ div>

プレーンjqueryセレクター

$('.item');
 [<div class = "item" data-order = "2"> 2 </ div>、
 <div class = "item" data-order = "1"> 1 </ div>、
 <div class = "item" data-order = "4"> 4 </ div>、
 <div class = "item" data-order = "3"> 3 </ div> 

これをデータ順に並べ替えます

function getSorted(selector、attrName){
 return $($(selector).toArray()。sort(function(a、b){
 var aVal = parseInt(a.getAttribute(attrName)) )、
 bVal = parseInt(b.getAttribute(attrName)); 
 return aVal-bVal; 
})); 
}
> getSorted('.item', 'data-order')
 [<div class = "item" data-order = "1"> 1 </ div>、
 <div class = "item" data-order = "2"> 2 </ div>、
 <div class = "item" data-order = "3"> 3 </ div>、
 <div class = "item" data-order = "4"> 4 </ div> 

getSorted()の仕組みをご覧ください。

お役に立てれば!

8
Troy Grosfield