tri jQuery utilisant des classes div supplémentaires

Question

J'ai un site WordPress qui affiche un certain nombre de messages dans une grille. Certains de ces messages contiendront une classe supplémentaire dans la première div du bloc - soit .featured ou .expired. J'essaie de trier ces derniers après le chargement de sorte que "en vedette" sont listés en premier, et "expiré" sont énumérés en dernier. Un échantillon des divs:

<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> 

J'ai une fonction similaire mise equalheight à ces divs au document prêt. De quoi aurais-je besoin d'ajouter, de sorte que les divs sont également triés comme décrit ci-dessus?

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

Answer 1

essayez et personnaliser selon les besoins dans WP (lorsque vous cliquez sur expiré, il lit tous les divs, sorte les reposant sur l'existence de la classe a expiré et ajoute tout retour au conteneur):

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>