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，我会将其存储在变量中，然后根据需要从该集合中拉出（就像在我的第一个示例中一样）。

Answer 2

甚至更简单：

$('#hi div:first').hide(); 
$('#hi div:eq(0)').hide(); //the same

编辑：我查看了jQuery（1.4.2）源代码并找出：

// .first() = eq(0)
first: function() {
    return this.eq( 0 );
},

// eq(i) wrapper around slide method
eq: function( i ) {
    return i === -1 ?
    this.slice( i ) :
    this.slice( i, +i + 1 );
},
// slice is not simple and pushstack method is quite complicated
slice: function() {
        return this.pushStack( slice.apply( this, arguments ),
            "slice", slice.call(arguments).join(",") );
    },
// so:
$('#hi div').slice(1); // does not work - returns all divs
$('#hi div').slice(-1); // returns first div

PS。我知道这一点毫无意义，但我想知道这些东西是如何工作的“引擎盖下”

Answer 3

$("#hi div").children(':first-child').show();

你可以链接

$("#hi div").hide().children(':first-child').show();

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

3 个答案: