jquery选择特定元素并操作它

Question

好吧，有点菜鸟问题 - 以及更多以满足我了解为什么我不能这样做，或者如何做得更好的需要......

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

这很有效，太棒了。

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

为什么这不起作用!有没有一种快捷方式可以完成我需要做的事情，而无需定义变量？

Answer 1

当您执行[0]时，您将从 jQuery 对象的元素集中拉出第一个 DOM 元素。因为 DOM 元素没有原生 .show() 函数，所以它不起作用。

第一个示例有效的原因是，您使用 [0] 拉出 DOM 元素，然后在执行 $(temp 时使用 jQuery 对象重新包装它)。你第二次就没有这么做了。

如果您希望仅定位 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()定位特定的匹配元素，以及 selectors可以使用。

$("#hi div:first")

采取哪种方法取决于具体情况。最终，最好避免重复相同的 DOM 选择。由于您的第一个代码似乎想要 .hide() 所有目标 div，因此我将其存储在一个变量中，然后根据需要从该集合中提取(就像我的第一个示例一样)。