Как выбрать дочерний элемент jQuery с одним селектором?

Question

У меня есть div с id article_50. Если бы я выбрал элемент .title внутри article_50, я мог бы сделать следующее: $("#article_50 .title").

Теперь скажите, что я хочу выбрать тот же заголовок, но внутри события клика:

$("#article_50").click(function(){
    $(this).children(".title").hide();
});

Теперь мне пришлось вызвать метод children, чтобы выбрать этот элемент .title. Могу ли я выбрать его в том же селекторе без необходимости звонить children?

Примерно так:

$("this .title").hide();

Спасибо!

Answer 1

Почти там:

$(".title", this).hide();

Answer 2

Используйте .children(), если элемент .title на самом деле является потомком this.

Когда вы делаете:

$(".title", this).hide();

... jQuery должен выполнить 7 или 8 тестов, прежде чем он обнаружит, что вы ищете .title внутри this.

Тогда jQuery просто переворачивает это на:

$(this).find('.title')

... и начинается заново. Так или иначе, это вызов метода после всего этого тестирования. Как видите, это не очень эффективно.

Кроме того, поскольку .children() выглядит только на один уровень глубже, использовать .children() быстрее, чем .find(), если ваш элемент на самом деле является дочерним.

---

EDIT:

Еще более быстрый способ - кэшировать элемент #article_50 в переменной, поэтому вам не нужно создавать объект jQuery для $(this) при каждом нажатии.

var $art_50 = $("#article_50").click(function(){
    $art_50.children(".title").hide();
});

// Now you have a variable that you can use outside the click handler as well
//   in case you are selecting it elsewhere in your code.

Answer 3

$("#article_50").click(function(){ $(".title", this).hide(); });

Answer 4

Разве вы не можете просто сказать:

$("#article_50").click(function(){ $("#article_50 .title").hide(); });

Это почти то же самое, и вам не нужно называть детей.