开发者

quicker way to specify nested elements in jQuery?

开发者 https://www.devze.com 2023-01-21 17:38 出处:网络
I have this code $(this).parent().children(\'.vote_count\').children(开发者_运维问答\'span.number\')

I have this code

$(this).parent().children('.vote_count').children(开发者_运维问答'span.number')

but I am wondering if there is a better way to go up one level, down two from a selector


how about

$("> .vote_count > span.number", $(this).parent())

or

$("> span.number", $(this).siblings(".vote_count"))

or

$("~ .vote_count > span.number", this)

or

$(this).find("~ .vote_count > span.number")` 

using the sibling selector and the child selector


How about using .siblings?

$(this).siblings('.vote_count').children('span.number');

After all, the children of my parents are my siblings.


Edit as per @patrick dw's comment, if you need to ensure that this is also included* then you can use .andSelf():

$(this).siblings('.vote_count').andSelf().children('span.number');

After a bit of discussion with patrick (see comments), it looks like the best answer is likely the one you already have: $(this).parent().children('.vote_count').children('span.number'), unless you can make assumptions about this based on how you selected it.


*The first answer (the one that doesn't use andSelf()) assumes that this is not a .vote_count.


You can condense it some:

$(this).parent().find('> .vote_count > span.number')

Live example

This has the advantage of offloading as much as possible to the selector engine (rather than making individual function calls), where it can possibly be optimized. (It won't necessarily be, just that you're making it possible.) Unlike several of the other solutions here, it won't miss out the current element if it's a .vote-count, it respects your use of immediate-child functions rather than descendant functions, and moreover it's simple. Your original seemed just fine to me as well, though.

Your original only considers immediate children, which I assume was intentional, but just for completeness, I'll mention:

If you want to find .vote-count at any level under the parent, and look for immediate children of them that are span.number, do this instead:

// Slightly different from your original, see comment above
$(this).parent().find('.vote_count > span.number')

If you only want to find .vote-counts that are immediate children, but then find span.number underneath them wherever they are (even if not immediate children), do this:

// Slightly different from your original, see comment above
$(this).parent().find('> .vote_count span.number')

...and finally if you want find any .vote-count anywhere under the parent (not just as an immediate child) and find any span.number under it (not just as an immediate child):

// Fairly different from your original, see comment above
$(this).parent().find('.vote_count span.number')


Personally, I think you're fine sticking with your original version, although I might change it to eliminate the .parent() call by using the native .parentNode property.

$(this.parentNode).children('.vote_count').children('span.number')


$(this).parent().find(".vote_count > span.number");

is one alternative.


I'll not quite sure if this what you are looking for:

$(this).parent().find('.vote_count > span.number')
0

精彩评论

暂无评论...
验证码 换一张
取 消