SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding an "alt" class to every third element in jQuery.

    I need to add an "alt" class to every third div of a certain class. Could someone please show me how to do this. I'd appreciate it if you could use jQuery to do it.

    Thanks!

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your syntax would look something like: $('.myClass').addClass('alt');

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I know that much, but what I'm having trouble figuring out (mostly because I know almost zip about JavaScript) is how to tell jQuery to only apply that to every 3rd element.

  4. #4
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Create a counter. I dunno jQuery, but:

    for(var i = document.getElementsByTagName("div"), x = 0, y = i.length, z = 0; x < y; x ++) {
    if(i[x].className == "whatever") {// use a simple workaround if it has multiple classes
    z ++;
    if(count &#37; 3 == 0) // Move this above z ++ if you want it to run on the very first DIV
    i[x].alt = "whatever";
    }
    }

  5. #5
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am a beginner but I think you can use something like

    Code:
              i = 1
              $('#mediummap area').each(function(j){
                   i = i + 1;
                   if (i == 3) {
                          // add class 
                          $(this).addClass('alt'); 
                          i = 0;
                   }
              });

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for the help... I got what I needed.

  7. #7
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about the delay, my Wifi died yesterday.... The most efficient method would be the following:
    var allTargetClasses = $('.myClass');
    var i = 2;
    var iMax = allTargetClasses.length;
    while(i < iMax) {
    $(allTargetClasses[i]).addClass('alt');
    i += 3;
    }

    With this method you do not cycle through each node, but only the required ones, therefore your script will execute faster. Also, while loops execute much faster than a jQuery Each, and are tailored for cases such as yours.

    On the whole, this is the cleanest possible way to acheive what you want

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You guys have all forgotten that jQuery supports pretty advanced CSS selectors:

    Code javascript:
    $('.divclass:nth-child(3n)').addClass('alt');


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
  •