jquery - 嵌套的 Jquery 调用

Question

今天我在一些代码中遇到了这个：

$($($(this).children()[1])).css("border-color", "#fff");

我以前从未见过这种情况，据我所知，编写以下代码将完成同样的事情：

$(this).children()[1].css("border-color", "#fff");

顶级方式有什么目的（更好吗？），或者这只是现在知道他们在用 JQuery 做什么的人？

Answer 1

第二个表达式不会做同样的事情，因为访问 jQuery 集合的数组元素返回 DOM 节点，而不是 jQuery 对象，并且您不能在其上调用 jQuery 方法。实际的等价物是：

$(this).children().eq(1).css("border-color", "#fff");

第一个代码相当于：

var temp = $(this).children()[1]; // Get DOM node of 2nd child
$(temp).css("border-color", "#fff"); // Wrap it in jQuery object and set CSS

Answer 2

第一个示例中的唯一原因是 [0] 从数组返回 jQuery 对象数组（又名：集合）中的“0”索引元素。

$('p')[0].hide(); // will NOT work

（[0]是数组中的 JS getter，类似于.get()jQuery 中的方法）

这就是为什么它再次包装在一个 jQuery 对象函数中

$( $('p')[0] ).hide();  // Hides the '0' <p> element

您还可以将 jQ 对象包装到其他对象中*

$( $( $( $( $('p') ) ) ) ).hide();

*这是无用的，多余的，缓慢的，无论如何都是错误的

恢复：

$( $('p')[0] ).hide();     // WORKS! cause the JS HTMLelement is
                           // again wrapped into an jQ Object

$( $('p').get(0) ).hide(); // WORKS (same reason)

$('p')[0].hide();          // WRONG! returns the unoperable (by jQ) JS Object
                           // HTMLelement, not a jQuery object

$('p').get(0).hide();      // WRONG! (same reason)

$( $( $( $( $('p')[0] ) ) ) ).hide();       // WTH?!

游乐场：http: //jsbin.com/enawup/3/edit

Answer 3

它们都会做同样的事情，只是第一个选项要慢得多。

如同：

$(this).children().eq(1).css("border-color", "#fff");

Answer 4

这不是更好。如果有的话 - 它的效率较低。在您的代码中使用.eq(1)以使其工作。

更好（最有效）：

$(this).children()[1].style.borderColor = '#fff';

Answer 5

我怀疑您的代码是否有效.. 因为.css是一个 jquery 方法并$(this).children()[1]返回没有方法调用的 DOM 元素.css()..

第一种方法较慢且混乱..但是它可以工作，因为它正在包装 DOM 元素以$()将其用作 jquery 对象..而且我确信在第一个示例中根本不需要一个额外的（外部）$()。

$($(this).children()[1]).css("border-color", "#fff"); //this should work

你可以通过使用得到结果first()

 $('div').children().first().css("color", "red");

或者eq()

 $(this).children().eq(1).css("border-color", "#fff");