jQuery: Trier les div en fonction du contenu des différents sous-divs

Question

J'essaie de créer une fonction de tri quelque peu complexe qui n'utilise ni les divs ni les listes. Malheureusement, deux heures de googling ne m'a pas aidé.

Voici la configuration de base de mon HTML:

      <div id="all_elements"> 

       <!-- one element --> 
       <div class="element"> 
        <div class="wrapper"> 
        <a href="/" title="links"> 
        <img src="/img/image.jpg" border="0" alt="image" class="image" /></a> 
        <div class="details"> 
         <h3><a href="/" title="title">Name (Sort Argument 1)</a></h3> 
         <div class="title"><a href="/" title="title">Title (Sort Argument 2)</a></div> 
         <div class="year">2010 (Sort Argumentt 3)</div> 
         <div class="country">Great Britain (Sort Argument 4)</div> 
        </div><!-- details --> 
        </div><!-- wrapper --> 
       </div><!-- element --> 

      </div> <!--all_elements--> 

La configuration est un peu complexe, mais fondamentalement .element est l'élément qui doit être triée par ordre alphabétique selon soit le contenu de h3, div. titre, div.year ou div.country. Ainsi, l'utilisateur pourra voir le contenu du site trié par nom, par année, par pays ou par titre.

J'ai cet extrait de jQuery d'un site Web, mais toutes mes tentatives d'essayer de lui dire d'utiliser le contenu de par exemple. h3 pour trier ont échoué. En ce moment, il trie à peu près au hasard. Comment puis-je personnaliser la fonction pour trier le contenu de mes h3 ou divs?

Answer 1

Essayez ces fonctions de comparaison à la place:

function sortAscending(a, b) { 
    return $(a).find("h3").text() > $(b).find("h3").text() ? 1 : -1; 
}; 
function sortDescending(a, b) { 
    return $(a).find("h3").text() < $(b).find("h3").text() ? 1 : -1; 
};