быстрый способ указать вложенные элементы в jQuery?

Question

У меня есть этот код

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

, но мне интересно, если есть лучший способ подняться на один уровень, вниз два с селектором

Answer 1

Вы можете уплотнить его некоторые:

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

Live example

Это имеет преимущество разгружая как можно больше, чтобы двигатель селектора (вместо того, чтобы индивидуальные вызовы функций), где он может возможно. (Это не обязательно, просто, что вы делаете это возможным.) В отличие от некоторых других решений здесь, он не пропустит текущий элемент, если это .vote-count, он уважает ваше использование функций с немедленным ребенком, а чем функции потомков, и, кроме того, это просто. Впрочем, твоя оригинальная версия тоже мне понравилась.

Ваш оригинальный рассматривает только непосредственные дети, которые я предполагаю, что было преднамеренным, но только для полноты картины, я упомяну:

Если вы хотите найти .vote-count по крайней любого уровня под родителя, и искать немедленного дети из них, которые span.number, сделать это вместо того, чтобы:

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

Если вы хотите, чтобы найти .vote-count S, которые немедленные детей, но затем найти span.number под ними, где бы они (даже если не непосредственные дети), сделайте следующее:

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

... и, наконец, если вы хотите найти .vote-count где-нибудь под родителя (не только как непосредственный ребенок) и найти какой-либо span.number под ним (а не только как непосредственный ребенок):

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

Answer 2

как о

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

или

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

или

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

или

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

с использованием sibling selector и child selector

Answer 3

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

одна альтернатива.

Answer 4

Как насчет использования .siblings?

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

В конце концов, дети моих родителей - мои братья и сестры.

---

Редактировать согласно комментарий @patrick Dw, в случае вам необходимо убедиться, что this также включен *, то вы можете использовать .andSelf():

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

---

После недолгого обсуждения с patrick (см. комментарии), похоже, лучший ответ, скорее всего, тот, который у вас уже есть: $(this).parent().children('.vote_count').children('span.number'), если вы не можете сделать предположения о this в зависимости от того, как вы его выбрали.

---

^{* Первый ответ (тот, который не использует andSelf()) предполагает, что this не .vote_count.}

Answer 5

Я не совсем уверен, если это то, что вы ищете:

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

Answer 6

Лично я думаю, что вы отлично придерживаетесь своей оригинальной версии, хотя я могу изменить ее, чтобы исключить вызов .parent(), используя собственное свойство .parentNode.

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