jQuery使用額外div類排序

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> 

我有一個類似的功能，在文件準備設置equalheight這些divs。我需要添加什麼，所以div也按上面所述進行排序？

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

Answer 1

試試這個和定製它需要WP（當您單擊過期，它讀取的所有div，排序它們基於過期階層的存在，並增加了所有回容器）：

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>