8

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.

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

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.

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

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

Jim Counts
  • 12,535
  • 9
  • 45
  • 63
rayne
  • 523
  • 1
  • 7
  • 24
  • Shouldn't that really be done on the server side rather than the client side? I think you're trying to put too much reliance on jQuery. – animuson Mar 23 '10 at 16:44
  • 1
    In this case there are a lot of objects with images displayed that would have to be reloaded if the sorting would happen on the server side. It would be much more convenient for the user to be able to sort the page without having to refresh and load all objects over and over again, even if it takes the javascript a while to re-sort as well. – rayne Mar 23 '10 at 16:50

1 Answers1

10

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;
};
Gumbo
  • 643,351
  • 109
  • 780
  • 844