Sorting List items using JQuery

Question

I have seen quite a few questions regarding this topic, but I cant find something that suits my needs.

The below is an example of work history and I need to order them in the correct order(Below is in the correct order)

<ul class="listitems">
    <li>March 2016 - Current</li>
    <li>October 2012 - February 2016</li>
    <li>January 2010 - September 2012</li>
    <li>October 2008 - December 2009</li>
</ul>

These items can be changed, to something like this, but will need to be reordered to show the same as the above :

<ul class="listitems">
    <li>March 2016 - Current</li>
    <li>October 2010 - February 2016</li>
    <li>January 2012 - September 2012</li>
    <li>October 2008 - December 2009</li>
</ul>

Essentially, I need to order the list items by the first month and first Year - Is this even possible or am I stretching it a bit?

EDIT

I have tried the suggestions below by adding the data-date attribute to the specific listitem tags :

Below is my one listitem:

<li id="employment_summaryitem1" class="list-group-item row" style="display:none">
                    <div class="col-xs-8">
                        <span id="employment_summary_text1"></span>
                    </div>
                    <div class="col-xs-offset-4">
                        <button id="btnDelete_employment_summary1" type="button" class="btn btn-xxs btn-danger pull-right glyphicon glyphicon-remove" style="font-size:x-small;position:relative"></button>
                        <button id="btnEdit_employment_summary1" type="button" class="btn btn-xxs btn-primary pull-right glyphicon glyphicon-pencil" style="font-size:x-small;margin-right:2px;position:relative"></button>
                    </div>
</li>

Below is my JQuery:

var StartMonth1 = $('#ddljobstartmonth').val();
var StartYear1 = $('#ddlstartyear').val();

$('#employment_summaryitem1').attr('data-date', StartMonth1 + ' ' + StartYear1);

$("li").sort(function (a, b) {
            return new Date($(a).attr("data-date")) > new Date($(b).attr("data-date"));
        }).each(function () {
            $("ul").prepend(this);
        });

I have 5 list items which basically do exactly the same, only difference is instead of StartMonth 1 and StartYear 1, it is StartMonth2 and StartYear2 ect.

Frontend wise, it seems to be creating new listitems, instead of sorting the existing ones. Am I missing something here ?

EDIT 2

I figured out my problem(silly me!!) I am leaving the above code as "record" for anyone that hits the same issue.

It was not actually re-creating the list, it was actually picking up ALL Lists on my page(I have 2) and was updating both(Overwriting my other list with this sorted list). Below is my code(I used the class name):

    $(".list-group-item").sort(function (a, b) {
        return new Date($(a).attr("data-date")) > new Date($(b).attr("data-date"));
    }).each(function () {
        $(".list-group").prepend(this);
    })

This way it sorts the specific list(based on the class name) and not all the lists.

Thanks for the help guys!!

add a data attribute to each <li> element with a datetime string of the start month, and use that to sort your values. — dommmm
– dommmm, Commented Feb 6, 2017 at 7:21
So it doesn't matter if the ranges overlap as in your second list, you want to basically ignore the "to" dates? What if you get two equal "from" dates? — nnnnnn
– nnnnnn, Commented Feb 6, 2017 at 7:21
@dommmm - That is actually a pretty good idea. Let me look into it and see if I can get it working. Will let you know. nnnnnn - In a perfect world, Id love to cater for all scenarios, but for now only on the First Month and Year. — AxleWack
– AxleWack, Commented Feb 6, 2017 at 7:35
@nnnnnn you could add a second (nested) data attribute and sort function to cater for similar values too, if you were so inclined! — dommmm
– dommmm, Commented Feb 6, 2017 at 7:38

Harsh Barach · Accepted Answer · 2017-02-06 07:33:44Z

1

Please try your code by adding data attribute. You can add year/month value in data attribute of <li data-year="year-value"> which becomes helpful for sorting.

answered Feb 6, 2017 at 7:33

Harsh Barach

9559 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AxleWack Over a year ago

Thanks! @dommmm suggested the same thing earlier, which I will look into. Appreciate the reply.

urbz · Accepted Answer · 2017-02-06 07:42:33Z

0

Using the sort() function:

$("li").sort(function(a, b) {
  return new Date($(a).attr("data-date")) > new Date($(b).attr("data-date"));
}).each(function() {
  $("ul").prepend(this);
});

Sort list items by custom attribute data-* (in this case I just called it data-date) by the date constructor.

After this is done, iterate through each of them whilst putting them back into the unordered list.

JsFiddle demo

answered Feb 6, 2017 at 7:42

urbz

2,6671 gold badge23 silver badges30 bronze badges

4 Comments

AxleWack Over a year ago

Thanks for providing sample code, this is very helpful. I will get back to you.

nnnnnn Over a year ago

If you reverse the sort order you don't need the .each() loop, you can just .prependTo("ul") to reinsert all of them into the actual DOM in one line. jsfiddle.net/g0smbm4z/1

AxleWack Over a year ago

I have tried your code, but cant seem to get right. I have updated my question with what I have tried, please let me know what I am missing...

AxleWack Over a year ago

I figured out my problem! I update my question with the answer. It was because I had 2 lists on my one page and both were being updated, instead of the specific one I wanted. I used the class name to specify which list I wanted updated. Thanks for the help!

Collectives™ on Stack Overflow

Sorting List items using JQuery

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related