jQuery - looping through elements and adding a class - jQuery

Hello,

I’ve put together a booking calendar program with jQuery/AJAX/PHP and I just need to make one tiny tweak but I’m struggling to get it working.

The calendar is a table and each <td> has a name attribute as the UK date (e.g 14/7/2010). When the element is clicked the date is added to an array and the table cell is given a class to indicate that it is selected. Everything works as it should because the array is sorted into order and the first and last dates are sent to the booking form, so it doesn’t matter that a user might have selected dates with gaps between them. The problem is that I need to fill those gaps to make it clear to the user that it is a single period of time so if I pick the dates 15/7/2010 and 20/7/2010 I need all the dates in between to be given the selected class and added to the array.

Any ideas?

Any help will be greatly appreciated.

Cheers,

Jon

Assuming that the TD elements are all in chronological order, you might be interested in the .nextUntil() jQuery method.

Something like this might accomplish what you want:

$(“td[name=15/7/2010]”).nextUntil(“td[name=20/7/2010]”).addClass(“selected”);

That’s now working (thanks), but it would be good to do the same backwards, in case a user selected a later date and then earlier date. Obviously prevUntil() would sort that out but what is the best way to determine which function to use?

Is there a way to find out whether a sibling appears earlier or later in the DOM, so I could put it into a conditional block?

Also, if I select a fourth date this function isn’t executed, any ideas?
<edit>I’ve seen the problem, this function only works for immediate siblings, so we have a bit of a problem if the second date is in a different row <tr>, any suggestions?</edit>

Cheers,

Jon

Hello,

The reason I need to add the dates to the array is because the array is converted to a string and posted to the PHP script (AJAX) which creates the calendar and is called when you access the previous/next month. I use that string (from the array) to add the selected class to <td> cells.

By the way, thanks for your help, I’ll try it out when I get a minute.

Cheers,

Jon


$("td[name='15/7/2010']")

Hi Jon,
I’m a little unclear here, as in your original description it seems like in one place you state that having only the first and last date in the array is sufficient, but at the end you seem to want all the dates to be added to your array.

If you only need the first and last dates, you should be able to continue to use whatever method you already use. If you want to add each individual date to the array, you could use the .each() method:

var dateArray = [];

$("td[name=15/7/2010]").nextUntil("td[name=20/7/2010]").addClass("selected").each(function() {
    dateArray.push($(this).attr('name'));
})

You don’t need an array, use nextuntil.
http://api.jquery.com/nextUntil/

That looks very promising, although how would I add the date to the array?

Cheers,

Jon

Each td in the table has a unique name, due to this reason, i think you’ll need to find the dates between first and last dates and then go through each (in a loop) and add a class to it.