jQuery: Div 'i farklı alt divlerin içeriğine göre sırala

Question

Ne divleri ne de listeler kullanan biraz karmaşık bir sıralama özelliği oluşturmaya çalışıyorum. Ne yazık ki, iki saatlik bir çalışma bana yardımcı olmadı.

İşte benim HTML basit bir kurumdur:

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

kurulum biraz karmaşık olmakla birlikte, temelde h3 her iki içeriğine göre alfabetik olarak sıralanacaktır gereken unsur .element olduğunu div. başlık, div.year veya div.country. Böylece, kullanıcı sitenin içeriğini, ada göre, yıl, ülke veya başlığa göre sıralayabilir.

Bu jQuery pasajını bir web sitesinden aldım, ancak tüm içeriğimin, örneğin; sıralamak için h3 başarısız oldu. Şu anda oldukça rasgele bir şekilde sıralar.

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

H3 veya div'larımın içeriğini sıralamak için işlevi nasıl özelleştirebilirim?

Answer 1

yerine bu karşılaştırma fonksiyonları deneyin:

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