nickoreardon nickoreardon - 24 days ago 5x
jQuery Question

Function for each div

I have made a function that works the way I want, jsfiddle link below. Basically it grabs a list of dates, orders them, deletes the li item if the date has passed, limits the result to 1 and then reformats it into a readable order. The result is to only display the next date that has not already passed.


<div class="over">
<ul id="test">

<div class="over">
<ul id="test">

The jQuery

$(".over ul").children().each(function (index) {

// get todays date
var marDate = $(this).text();
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;

// sort dates
var elems = $.makeArray($("ul").children());
elems.sort(function(b, a) {
return new Date( $(a).text() ) < new Date( $(b).text() );

// check if date has passed
if (output > marDate) {

// limit results to 1
$("ul").children().each(function (index) {
var displayAmt = 1;

//split string and reorder it to normal format
var data = $('ul').children().text();
var arr = data.split('-');
$("ul").children().html("<span class='day'>" + arr[2] + "</span>" +" "+ "<span class='month'>" + arr[1] + "</span>");

The problem I'm having is i want this function to happen for each of the divs called 'over'. Should i be able to wrap everything with a

// everything here


I can't seem to get that to work, it just either grabs both sets of information from the two sets of li's, and just provides one output, or the outcome is undefined.

Not too sure where I'm going wrong, also, if any of my other methods are wildly wrong, let me know, I'm pretty new to jQuery. Thanks.

** edit **

I figured it out, for anyone who is interested, he're my working jsfiddle


Try this:

$.each($(".over ul li"), function(){
   //your code here