如何使用一个选择器选择 jQuery 元素的子元素？

Question

我有一个带有 id article_50 的 div。 如果我要选择 article_50 中的 .title 元素，我可以执行以下操作： $("#article_50 .title")。

现在假设我想选择相同的标题，但在单击事件中：

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

现在我必须调用 children 方法来选择该 .title 元素。 我可以在同一个选择器中选择它而不需要调用 children 吗？

像这样的东西：

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

谢谢！

Answer 1

快到了：

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

Answer 2

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

Answer 3

如果 .title 元素实际上是 this 的子元素，请使用 .children()。

当您这样做时：

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

...jQuery 必须运行 7 或 8 个测试才能确定您正在 this 中查找 .title。

然后 jQuery 将其翻转为：

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

...然后重新开始。所以在所有测试之后它无论如何都会调用一个方法。正如你所看到的，它的效率不是很高。

此外，由于 .children() 看起来只深一层，因此使用 .children() 比 .find() 更快，如果您元素实际上是一个子元素。

---

编辑：

更快的方法是将 #article_50 元素缓存在变量中，因此您不需要为 $(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 4

难道你不应该说：

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

差不多一样了，你不需要叫孩子了。