余分なdivクラスを使用したjQueryソート

Question

グリッド内にいくつかの投稿を表示するWordPressサイトがあります。これらの投稿の一部には、ブロックの最初のdivに追加のクラスが含まれます（.featuredまたは.expired）。私は読み込んだ後、これらをソートしようとしていますので、 "フィーチャー"が最初にリストされ、 "期限切れ"が最後にリストされます。 div要素のサンプル：

<div class="search_results grid_style"> 
<div class="col-lg-3 itemdata itemid1012 item-1012 expired"></div> 
<div class="col-lg-3 itemdata itemid1013 item-1013"></div> 
<div class="col-lg-3 itemdata itemid1014 item-1014 featured"></div> 
<div class="col-lg-3 itemdata itemid1015 item-1015"></div> 
<div class="col-lg-3 itemdata itemid1016 item-1016"></div> 
</div> 

は、私は準備ができて、文書でこれらdivsにequalheightを設定し、同様の機能を持っています。何を追加する必要があるので、divも上記のようにソートされていますか？

<script> 
jQuery(document).ready(function() { 
    setTimeout(function(){equalheight('.grid_style .itemdata'); }, 2000); 
}); 
</script> 

Answer 1

（あなたが期限切れをクリックしたとき、それはソートそれら期限切れのクラスの存在に基づいて、バックコンテナにすべて追加し、すべてのdivを読み込む）これを試してみて、WPで、必要に応じてカスタマイズ：

var $divs = $("div.box"); 
 

 
$('#sortBnt').on('click', function() { 
 
    var orderedDivs = $divs.sort(function (a, b) { 
 
    var x = 0, y =0; 
 
    if($(a).hasClass('expired')) x = 3; 
 
    if($(a).hasClass('featured')) x = -1; 
 
    if($(b).hasClass('expired')) y = 3; 
 
    if($(b).hasClass('featured')) y = -1; 
 
    return x - y; 
 
    }); 
 
    $("#container").html(orderedDivs); 
 
});

.box { 
 
    background: red; 
 
    height: 100px; 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <button id="sortBnt">expired</button> 
 
    <div id="container"> 
 
     <div class="box expired"> 
 
     <h1>B<h1> 
 
     <h2>expired</h2> 
 
     </div> 
 
    
 
     <div class="box"> 
 
     <h1>A<h1> 
 
     <h2></h2> 
 
     </div> 
 
    
 
     <div class="box expired"> 
 
     <h1>D<h1> 
 
     <h2>expired</h2> 
 
     </div> 
 
    
 
     <div class="box featured"> 
 
     <h1>C<h1> 
 
     <h2>featured</h2> 
 
     </div> 
 
    </div> 
 
</div>