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'索引元素（AKA：collection）。

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

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

这就是为什么它再次包装在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");

嵌套的Jquery调用

5 个答案: