homepage Welcome to WebmasterWorld Guest from 50.16.169.220
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved