homepage Welcome to WebmasterWorld Guest from 50.16.108.167
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library : Charter : Moderators: whoisgregg

JavaScript and AJAX Forum

    
Add class to every third div?
greencode




msg:4276102		 7:38 pm on Mar 3, 2011 (gmt 0)

I'm currently using this code to add a class of "last" to the last list item in any list but what I am now trying to do is to add the class of "last" to every third div block that I have in a containing div. For example I have a grid of 3 by 3 and so the last div in each of those three rows I would like to have zero right margin.

The code I used for the list item was this:

$(document).ready(function() {
$("li:last-child").addClass("last");
});

But I've not idea where to start with the code for every third div!

 

coopster




msg:4276292		 11:12 pm on Mar 3, 2011 (gmt 0)

How about nth-child [api.jquery.com]? 
$("div div:nth-child(3)").addClass('last');

greencode




msg:4276303		 11:24 pm on Mar 3, 2011 (gmt 0)

Thanks for this - am I right in thinking though that this is only from IE9?
coopster




msg:4276307		 11:28 pm on Mar 3, 2011 (gmt 0)

No, should work cross-browser, without issue. jQuery programmers (and other open-source contributors) ensure this for you.
greencode




msg:4276315		 11:38 pm on Mar 3, 2011 (gmt 0)

Arh, I didn't know that. I shall give this a go tomorrow when I'm less tired! Just to clarify what do I enter as each of the "div"s in your example

$("div div:nth-child(3)").addClass('last');

Do I enter the containing div name and then the div block I'm wanting to add the class to so it looks like this:

$(".divcontainer .divblock:nth-child(3)").addClass('last');

Thanks for your help with this - very much appreciated.
coopster




msg:4276317		 11:47 pm on Mar 3, 2011 (gmt 0)

You need to read up on selectors. jQuery "mimics" id and class attribute selectors to determine which elements you are targeting. Let's say I have 5 separate <div>s in my html, and within those 5 div elements I have 10 divs each. The code I offered would add the class of "last" to the 3rd div within each of the 5 "parent" div containers.

The way you have it written now would require you to have a class of "divcontainer" on your 5 parent containers (<div>, <p>, etc.) and a class of "divblock" for any containers within them. You can read up on jQuery Selectors [api.jquery.com] for more information.
greencode




msg:4276319		 11:49 pm on Mar 3, 2011 (gmt 0)

Thanks again
coopster




msg:4276327		 12:01 am on Mar 4, 2011 (gmt 0)

You're welcome. I hope that made sense ;)
greencode




msg:4276496		 9:39 am on Mar 4, 2011 (gmt 0)

Just to let you know I added this to my custom js file so that any third div within it's containing div with ID of "results" and class of "grid" will be given a class of "last".

$("#results.grid div:nth-child(3n)").addClass('last');

Just in case anyone else needs to know.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved