jQuery: Ordenar div según el contenido de diferentes subdivisiones

Question

Estoy tratando de crear una función de clasificación un tanto compleja que no usa divs ni listas. Lamentablemente, dos horas de Google no me ayudaron.

Aquí es la configuración básica de mi 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 configuración es un poco complejo, pero básicamente .element es el elemento que necesita ser ordenados alfabéticamente de acuerdo con cualquiera de los contenidos de h3, div. title, div.year o div.country. Por lo tanto, el usuario podrá ver el contenido del sitio ordenado por nombre, año, país o título.

Tengo este fragmento de jQuery de un sitio web, pero todos mis intentos intentan decirle que use los contenidos de, p. h3 para ordenar ha fallado. En este momento, ordena bastante al azar.

  jQuery.fn.sort = function() { 
        return this.pushStack([].sort.apply(this, arguments), []); 
      }; 
      function sortAscending(a, b) { 
        return a.innerHTML > b.innerHTML ? 1 : -1; 
      }; 
      function sortDescending(a, b) { 
        return a.innerHTML < b.innerHTML ? 1 : -1; 
      }; 
      $(document).ready(function() { 
       $("#sort").toggle(
         function() { 
           $('#all_elements .element').sort(sortDescending).appendTo('#all_elements'); 
           $(this).text("Sort Asc"); 
         }, 
         function() { 
           $('#all_elements .element').sort(sortAscending).appendTo('#all_elements'); 
           $(this).text("Sort Desc"); 
         }); 
      }); 

¿Cómo puedo personalizar la función para ordenar el contenido de mi h3 o divs?

Answer 1

Prueba estas funciones de comparación en su lugar:

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