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

回答

相关问题