2184 posts
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Participated in a focus group or interview to improve the user experience on Envato Market
  • Interviewed on an Envato blog
+10 more
revaxarts says
or replace
jQuery('#portfolioItem').find('li')
with this
jQuery('li', '#portfolioItem')

Should be fast too because the tag selector is also nativ

1383 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
wpCanyonThemes says

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')
470 posts
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has sold $250,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
SaurabhSharma says

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.

1467 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Made it to the Authors' Hall of Fame
  • Has been part of the Envato Community for over 6 years
  • Has sold $250,000+ on Envato Market
+5 more
fuelthemes says

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

Great tool. Only (3n) is needed

2184 posts
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Participated in a focus group or interview to improve the user experience on Envato Market
  • Interviewed on an Envato blog
+10 more
revaxarts says

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

611 posts
  • Member of the Envato Team
  • Had an item featured in an Envato Bundle
  • Made it to the Authors' Hall of Fame
  • Contributed a blog post
+10 more
Siddharth Envato team says

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.

3503 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Located in United States
  • Helps us moderate the forums
+10 more
sevenspark Moderator says

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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by