jquery选择特定元素并对其进行操作

Question

好吧,一点菜鸟问题 - 更多的是满足我的理解为什么我不能这样做,或者如何做得更好....

$("#hi div").hide();
var temp = $("#hi div")[0];
$(temp).show();

这很有效.

$("#hi div")[0].show();

为什么不起作用!有没有简单的方法来做我需要做的事情,而不必定义变量？

Answer 1

当你这样做时[0],你将从jQuery对象中的元素集中拉出第一个DOM元素.因为DOM元素没有本机.show()函数,所以它不起作用.

第一个例子工作的原因是你将DOM元素拉出来[0],但是当你这样做时,用jQuery重新包装它$(temp).第二次你没有这样做.

如果您希望仅定位jQuery对象中的第一个匹配元素,请使用.eq(0),这将为您提供jQuery包装的DOM元素.

var divs = $("#hi div").hide();
divs.eq(0).show(); // to show the first one

divs.eq(0).hide(); // or to hide it

此示例存储在变量中匹配的包装元素集.然后使用不同的jQuery方法提取所需的那些.这样您就不需要从DOM中连续选择元素.

正如@Justus Romijn在下面的评论中指出的那样,还有其他方法.first()可以定位特定的匹配元素,以及可以使用的选择器.

$("#hi div:first")

采取哪种方法取决于具体情况.最终,避免重复相同的DOM选择是很好的.由于你的第一个代码似乎想要.hide()所有目标div,我将它存储在一个变量中,然后根据需要从该集合中拉出(就像在我的第一个例子中).