jQuery：根據不同子div的內容排序div

我正在嘗試創建一個既不使用div也不使用列表的複雜排序功能。不幸的是，兩個小時的谷歌搜索沒有幫助我。jQuery：根據不同子div的內容排序div

這裏是我的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-->

的設置是一個有點複雜，但基本上.element是一個需要根據H3的任意內容按字母順序排序的元素，DIV。標題，div.year或div.country。因此，用戶將能夠按名稱，按年份，按國家或按標題查看網站的內容。

我從網站上有這個jQuery代碼片段，但是我試圖告訴它使用例如h3排序失敗。現在它幾乎隨機排序。

  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或div的內容進行排序？

來源

2010-03-23 rayne

難道不應該真的會在服務器端，而不是客戶端做了什麼？我認爲你試圖過分依賴jQuery。 – animuson 2010-03-23 16:44:25

在這種情況下，有很多顯示圖像的對象，如果在服務器端發生排序，則必須重新加載圖像。用戶能夠更方便地對頁面進行排序，而不必一遍又一遍地刷新和加載所有對象，即使它需要JavaScript一段時間來重新排序也是如此。 – rayne 2010-03-23 16:50:01

嘗試這些比較函數來代替：

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

來源

2010-03-23 16:42:51 Gumbo

jQuery：根據不同子div的內容排序div

回答

相關問題