AxleWack AxleWack - 4 years ago 107
jQuery Question

Sorting List items using JQuery

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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download