SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2008
    Location
    Gloucestershire, UK
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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");

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2008
    Location
    Gloucestershire, UK
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks very promising, although how would I add the date to the array?

    Cheers,

    Jon

  5. #5
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need an array, use nextuntil.
    http://api.jquery.com/nextUntil/
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  6. #6
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

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

  7. #7
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    $("td[name='15/7/2010']")

  8. #8
    SitePoint Zealot
    Join Date
    Jun 2008
    Location
    Gloucestershire, UK
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by benzittlau View Post
    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.
    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

  9. #9
    SitePoint Zealot
    Join Date
    Jun 2008
    Location
    Gloucestershire, UK
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •