0

I have a div which contains a number of links.

Each link has a "data-direction" attribute, containing an integer of 1, 2, or 3.

I want to add a click event to a button to sort the links in the div, first by the "data-direction" attribute and then by the link text.

e.g., if I start with the following:

<div id="link_list">
   <a href="#" data-direction="2">Allergy</a>
   <a href="#" data-direction="1">Walking</a>
   <a href="#" data-direction="3">Belltower</a>
   <a href="#" data-direction="1">Apple</a>
   <a href="#" data-direction="2">Affable</a>
</div>

...my goal is to sort as:

<div id="link_list">
   <a href="#" data-direction="1">Apple</a>
   <a href="#" data-direction="1">Walking</a>
   <a href="#" data-direction="2">Allergy</a>
   <a href="#" data-direction="2">Affable</a>
   <a href="#" data-direction="3">Belltower</a>
</div>
johannchopin
  • 13,720
  • 10
  • 55
  • 101
MurrayW
  • 393
  • 2
  • 10
  • We are always glad to help and support new coders but you need to help yourself first. After [doing more research](https://meta.stackoverflow.com/q/261592/1011527), if you have a problem, please post what you've tried with a clear explanation of what isn't working and provide [a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). Read ['How to Ask a good question' guide](http://stackoverflow.com/help/how-to-ask), [Question Do's and Don'ts](https://meta.stackoverflow.com/q/347937/1011527), and [take the tour](http://stackoverflow.com/tour) – Rory McCrossan Oct 31 '19 at 10:23
  • 2
    To start you off on your research, try [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), [this](https://stackoverflow.com/q/21600802/519413) and [this](https://stackoverflow.com/a/32564895/519413) – Rory McCrossan Oct 31 '19 at 10:24
  • Thanks for the guidance, @RoryMcCrossan. I have spent some time trying to find a solution to this on stackoverflow. The only examples I have been able to find so far appear to only sort by a single attribute. – MurrayW Oct 31 '19 at 10:25
  • Check the last link in the previous comment – Rory McCrossan Oct 31 '19 at 10:26
  • @RoryMcCrossan - I found this post earlier but wasn't successful in translating the OP's starting point to mine. I'll continue looking at it, thank you. – MurrayW Oct 31 '19 at 10:28
  • 1
    No problem. If you add the JS code you wrote to the question we can help you debug it more effectively. – Rory McCrossan Oct 31 '19 at 10:28

1 Answers1

1

Thanks to Rory McCrossan's guidance above, the following appears to work for my usecase.

This sets a variable called link_sort_direction, which is used to record the sort state of the div in question.

<script type="application/javascript">
    var link_sorted_direction = true;
    $('#sort_links').click(function (e) {
        var elements = $('#div_links').children('a');
        if (link_sorted_direction === true) {
            link_sorted_direction = false;
            elements.sort(function (a, b) {
                var nameA = $(a).text();
                var nameB = $(b).text();
                return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0;
            })
        } else {
            link_sorted_direction = true;
            elements.sort(function (a, b) {
                var contentA = parseInt($(a).attr('data-direction'));
                var contentB = parseInt($(b).attr('data-direction'));
                if (contentA === contentB) {
                    var nameA = $(a).text();
                    var nameB = $(b).text();
                    return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0;
                } else {
                    return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
                }
            });
        }
        $('#div_links').append(elements);
        e.preventDefault();
    })
</script>

I would appreciate any suggestions for improvements.

MurrayW
  • 393
  • 2
  • 10