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が収まる場所を確認する必要があると思いますが、これが最善の方法かどうかはわかりません。

jqueryjquery-selectorsjavascriptjquery-ui-sortable
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
Jayantha Lal Sirisena

これを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