Уплотненный Jquery вызовы

Question

Сегодня я наткнулся на это в какой-то код:

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

я не видел этого раньше, и в меру моего понимания, писать следующее будет сделать то же самое:

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

Есть ли какая-либо цель на верхнем пути (лучше?), Или это только кто-то теперь знает, что они делают с JQuery?

Answer 1

Второе выражение не будет делать то же самое, потому что доступ к элементам массива из коллекции JQuery возвращает узел DOM, а не объект JQuery, и вы можете 't называть методы 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

Те будут делать то же самое, только первый вариант намного медленнее.

То же, что:

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

Answer 3

Это не лучше. Если что-то - это менее эффективно. Используйте .eq(1) в своем коде, чтобы он работал.

Еще лучше (наиболее эффективный):

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

Answer 4

я сомневаюсь, что ваш код работает .... так .css является метод JQuery и $(this).children()[1] возвращает DOM элемент, который будет иметь нет вызова метода .css() ..

первого метод медленнее и messy..however это работает, так как он оборачивает элемент DOM с $(), чтобы использовать ее в качестве Jquery объективистского t .. и я уверен, что один дополнительный (внешний) $() в первом примере вообще не нужен.

$($(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"); 

Answer 5

Единственная причина, в первом примере, это то, что [0] возвращает из массива ' 0 'из массива объектов jQuery (AKA: collection).

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

([0] является JS геттер из массива, что-то вроде .get() метода в JQuery)

, поэтому он снова завернуты внутри функции объекта JQuery

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

Вы можете также обертывание объектов jQ на дополнительные объекты *

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

*, который unneded, redundand, медленно, Неправильный в любом случае

Резюме:

$($('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