2952 posts
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Contributed a Blog Post
  • Elite Author
  • Exclusive Author
+5 more
DDStudios says

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!

4264 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Microlancer Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says

There you go.

jQuery('#portfolioItem li:nth-child(3n+3)').css({ marginRight: '0px' });
181 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Mexico
  • Has been a member for 4-5 years
  • Bought between 100 and 499 items
  • Referred between 10 and 49 users
MCStudios says

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 = ''; }
<li class="&lt;?php echo $postclass; ?&gt;">
       your code.....
</li>

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 :)

550 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Won a Competition
  • Interviewed on the Envato Notes blog
  • United States
+11 more
theMOLITOR says
4264 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Microlancer Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says

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 = ''; }
<li class="&lt;?php echo $postclass; ?&gt;">
       your code.....
</li>

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 :D

2952 posts
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Contributed a Blog Post
  • Elite Author
  • Exclusive Author
+5 more
DDStudios says

Damn, I knew it was simple :)

Thanks my friend.

181 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Mexico
  • Has been a member for 4-5 years
  • Bought between 100 and 499 items
  • Referred between 10 and 49 users
MCStudios says

Mine is a single line :D

Man i need to learn more about jQuery :)

4264 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Microlancer Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says


Mine is a single line :D
Man i need to learn more about jQuery :)

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

606 posts
  • Envato Staff
  • Blog Editor
  • Senior Reviewer
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Author had a File in an Envato Bundle
  • Forum Moderator
  • Microlancer Beta Tester
  • Sold between 10 000 and 50 000 dollars
+9 more
Siddharth Staff says

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.

2001 posts
  • Elite Author
  • Author had a Free File of the Month
  • Has been a member for 4-5 years
  • Austria
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Microlancer Beta Tester
+3 more
revaxarts says
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');});
;)
by
by
by
by
by
by