6

私は次のHTML構造を持っています:

<div id="container">
    <div>1</div>
    <div class="red">2</div>
    <div class="red">3</div>
    <div>4</div>
    <div>5</div>
    <div class="red">6</div>
    <div>7</div>
</div>

最初に class="red" を持つ div を並べ替え、次にそれを持たないdiv を並べ替えて、div コンテナー内の div を並べ替える Jquery を実行する必要があったため、最終的な構造は次のようになります。

<div id="container">
    <div class="red">2</div>
    <div class="red">3</div>
    <div class="red">6</div>
    <div>1</div>
    <div>4</div>
    <div>5</div>
    <div>7</div>
</div>

ヘルプ？ありがとう。

4

4 に答える 4

19

これを試して：

 $(function(){
   var elem = $('#container').find('div').sort(sortMe);
   $('#container').append(elem);
 });

 function sortMe(a, b) {
        return a.className < b.className;
  }

デモ

一部fadeIn/fadeoutアニメーションあり

var elem = $('#container').find('div').sort(sortByClass);

 function sortByClass(a, b) {
    return a.className < b.className;
 }

 var allElem = elem.get();
  (function append() {

    var $this = $(allElem.shift());

     $('#container').append(
                $this.fadeOut('slow'))
                         .find($this)
                             .fadeIn('slow', function () {
                                      if (allElem.length > 0) 
                                          window.setTimeout(append);
                            });
      })();

デモ

于 2013-06-10T05:06:43.243 に答える
3

html に 2 つのボタンを追加します。

<button class="sort">SORT</button>
<button class="unsort">UNSORT</button>

クリック ハンドラーをアタッチ...

$('.sort').click(function(){
 var elem = $('#container').find('div').sort(doSort);
 $('#container').append(elem);
}

$('.unsort').click(function(){
 var elem = $('#container').find('div').sort(doUnsort);
 $('#container').append(elem);
}

ソート機能

function doSort(a, b) {
 return a.className < b.className;
}

function doUnsort(a, b) {
   var a = $(a).text().toUpperCase();
   var b = $(b).text().toUpperCase();
   return (a < b) ? -1 : (a > b) ? 1 : 0;
}

JSフィドルのデモ

于 2013-06-10T05:14:48.730 に答える
2

PSL の回答に続いて? 1 : -1、次のように sortMe 関数に追加する必要がありました。

$(function(){
   var elem = $('#container').find('div').sort(sortMe);
   $('#container').append(elem);
 });

 function sortMe(a, b) {
        return a.className < b.className ? -1 : 1; // This is the added code
  }

私の同様の質問に回答してくれた Alex と Rejith に感謝します。

于 2016-06-03T21:26:28.393 に答える