Targeting every 3rd, 6th, 9th etc element of a list with Jquery

[DDStudios]

I want to target these element for my 3 collumn portfolio page and I did something like this :

jQuery(’.page-template-portfolio-full-php #portfolioItem li:nth-child(3n)’).css({ marginRight: ‘0px’});
jQuery(’.page-template-portfolio-full-php #portfolioItem li:nth-child(6n)’).css({ marginRight: ‘0px’});
jQuery(’.page-template-portfolio-full-php #portfolioItem li:nth-child(9n)’).css({ marginRight: ‘0px’});
jQuery(’.page-template-portfolio-full-php #portfolioItem li:nth-child(12n)’).css({ marginRight: ‘0px’});

I know it’s not the best way and I know I could do something like i++ or something but im not sure exactly what it is …

I want to do the same thing for the 2 collumn … only this time target every 2nd, 4th, 6th element etc etc …

How is it done?

Thanks guys!

[Ivor]

There you go.

jQuery('#portfolioItem li:nth-child(3n+3)').css({ marginRight: '0px' });

[MCStudios]

Hi DD

I think it’s easier with i++ you can do it this way:

$counter =0;

query_posts  <--- your normal query

if ( have_posts() )  ,etc. you know the rest


++$counter;
	  if($counter == 3) {
	    $postclass = 'last';
	    $counter = 0;
	  } else { $postclass = ''; }

your code.....

This will add the class last to every 3rd, 6th, 9th, etc elements. and then you just need your css.

.last{margin-right: 0 !important;}

Edit: Ivor was faster

[theMOLITOR]

Love this tool: http://css-tricks.com/examples/nth-child-tester/

[Ivor]

manu3l9816 said

Hi DD

I think it’s easier with i++ you can do it this way:

$counter =0;

query_posts  <--- your normal query

if ( have_posts() )  ,etc. you know the rest


++$counter;
	  if($counter == 3) {
	    $postclass = 'last';
	    $counter = 0;
	  } else { $postclass = ''; }

your code.....

This will add the class last to every 3rd, 6th, 9th, etc elements. and then you just need your css.

.last{margin-right: 0 !important;}

Edit: Ivor was faster

Mine is a single line

[DDStudios]

Damn, I knew it was simple

Thanks my friend.

[MCStudios]

Ivor said

Mine is a single line

Man i need to learn more about jQuery

[Ivor]

manu3l9816 said

Ivor said

Mine is a single line

Man i need to learn more about jQuery

But your solution gave me an idea for a problem I’m having here haha! Thanks.

[Siddharth]

Yep, the nth child selector is the way to go. But keep in mind that this take a performance hit if the number of portfolio items is huge. [Actually huge.]

In those cases, you’re better of checking the position of an entry and assigning an appropriate class through server side code, PHP in this case, I’m assuming. Then you can merely use the class selector to manipulate specific elements in the front end, as needed.

This way, computation is offloaded to the server instead of the client having to do the job. Again, this only applies if you have a huge number of elements to parse. Otherwise, the simpler method noted above should do.

[EverPress]

ok, here comes mine:

jQuery('#portfolioItem').find('li').each(function(i,e){
   if(!i%3) $(e).css({ marginRight: '0px' });
});

The child selector isn’t good for large list. The id selecter is the fastest and the find method is fast too.

Far better is to assign a class which is slightly faster than the css:

jQuery('#portfolioItem').find('li').each(function(i,e){
   if(!i%3) $(e).addClass('last');
});

Anyway, I recommend the latest jquery version but at least 1.4.4.

Edit: and in one line:

jQuery('#portfolioItem').find('li').each(function(i,e){if(!i%3)$(e).addClass('last');});

[EverPress]

or replace

jQuery('#portfolioItem').find('li')

with this

jQuery('li', '#portfolioItem')

Should be fast too because the tag selector is also nativ

[wpCanyonThemes]

revaxarts said

or replace

jQuery('#portfolioItem').find('li')

with this

jQuery('li', '#portfolioItem')

Should be fast too because the tag selector is also nativ

Aren’t you maybe targeting all list items and the element with the id of portfolioItem.

To avoid the find use

$('#portfolioItem li')

[SaurabhSharma]

Siddharth said

In those cases, you’re better of checking the position of an entry and assigning an appropriate class through server side code, PHP in this case, I’m assuming. Then you can merely use the class selector to manipulate specific elements in the front end, as needed.

+1. I always use an algorithm in php to detect nth element for my portfolio pages. This makes sure that the page still looks fine with non-availability of javascript. But it gets into trouble when implementing with sortable portfolio.

[fuelthemes]

themolitor said

Love this tool: http://css-tricks.com/examples/nth-child-tester/

Great tool. Only (3n) is needed

[EverPress]

wpCanyonThemes said

Aren’t you maybe targeting all list items and the element with the id of portfolioItem.

To avoid the find use

$('#portfolioItem li')

No, I’m targeting al list items within the portfolioItem

jQuery('li', '#portfolioItem') != jQuery('li, #portfolioItem')

Furthermore jQuery don’t has to check the whole DOM. It just start with the #portfolioItem

[Siddharth]

wpCanyonThemes said

To avoid the find use

$('#portfolioItem li')

No, Xaver’s method is much better.

His code will find the element with the ID and then filter for the tag. Since both use native JavaScript methods, it’ll be blazingly fast.

Your method, while quite adequate for general use, is inefficient. Sizzle, jQuery’s selector engine, handles selectors right to left so there’s a lot of overhead involved. It finds all li elements and then sees whether the ID is a parent.

Mostly, you don’t have to worry about these issues since performance becomes an issue only if you have too many elements.

[sevenspark]

For anyone who is interested in/confused about these types of efficiency questions, this quick article from Jeffrey Way is a useful read: Quick Tip: Think Right-to-Left with jQuery