jQuery：根据不同子div的内容对div进行排序 [英] jQuery: Sort div's according to content of different sub divs

问题描述

我正在尝试创建一个有点复杂的排序功能，既不使用div也不使用列表。不幸的是，两个小时的谷歌搜索没有帮助我。

I'm trying to create a somewhat complex sorting feature which neither uses divs nor lists. Unfortunately two hours of googling didn't help me.

以下是我的HTML的基本设置：

Here is the basic setup of my 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.title，div.year或div.country的内容。因此，用户将能够按名称，按年份，按国家/地区或按标题查看网站内容。

The setup is a bit complex, but basically .element is the element that needs to be sorted alphabetically according to either the contents of h3, div.title, div.year or div.country. So the user will be able to view the contents of the site either sorted by name, by year, by country or by title.

我有一个来自网站的jQuery片段，但我尝试告诉它使用例如以下内容的所有尝试h3排序失败了。现在它几乎随机排序。

I have this jQuery snippet from a website, but all my attempts on trying to tell it to use the contents of e.g. h3 to sort have failed. Right now it sorts pretty much randomly.

            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的内容进行排序？

How can I customize the function to sort the contents of my h3 or divs?

推荐答案

请尝试使用这些比较函数：

Try these comparison functions instead:

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

这篇关于jQuery：根据不同子div的内容对div进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！