2015-08-03 4 views
3

У меня есть два одинаковых кусков кода (?):Странное поведение JQuery добавить() метод

var x = document.createElement('div'); 
var y = document.createElement('div'); 
var z = $().add(x).add(y); 
console.log(z); 

и

var x = document.createElement('div'); 
var y = document.createElement('div'); 
var z = $(); 
z.add(x); 
z.add(y); 
console.log(z); 

Первый пример показать мне: + Object [DIV, DIV ]

Иное: Объект []

Почему ???

Fiddle: http://jsfiddle.net/d3x7gsLu/

Больше магии: http://jsfiddle.net/d3x7gsLu/1/

UPD:

Первый правильный ответ: https://stackoverflow.com/a/31798686/3558278

Теперь мой вопрос:

И как сделать его (добавлять элементы в внутренняя коллекция) без создания нового объекта jQuery? Потому что в реале у меня много и много элементов.

UPD2:

Ответ здесь: Aggregating a jQuery object?

Спасибо за все!

+0

Потому что jQuery - антихрист. – Vidul

+0

Итак, вы спрашиваете, как добавить элементы к существующему объекту jQuery, изменив этот существующий объект, а не создавая второй? – nnnnnn

+0

@nnnnnn сейчас - да)) – Deep

ответ

6

От jQuery API:

Учитывая объект JQuery, который представляет собой набор элементов DOM, то .add() метод создает новый объект JQuery из объединения тех элементов и те, перешел в метод. Аргумент для .add() может быть почти любым, что принимает $(), включая выражение селектора jQuery , ссылки на элементы DOM или фрагмент HTML.

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

var x = document.createElement('div'); 
var y = document.createElement('div'); 
var z = $(); 
z = z.add(x); 
z = z.add(y); 
console.log(z); 
+0

Хорошо. И как сделать это (добавить элементы во внутреннюю коллекцию) без создания нового объекта jQuery? – Deep

0

$.add() возвращает новое значение, оно не изменяет исходное значение z , В первом примере вы говорите:

Создайте пустой объект JQuery, добавить элемент в переменной x к нему затем добавить элемент в переменной y к нему. Назначьте этот объект переменной z.

В конце концов, значение z будет представлять собой объект, содержащий два элемента.

Во втором примере вы говорите:

Создайте пустой объект JQuery. Назначьте этот объект переменной z. Затем посмотрите, что произойдет, если вы добавите элемент в переменную x к этому объекту. Затем посмотрите, что произойдет, если вы добавите элемент в переменную y к этому объекту.

В конце концов, значение z по-прежнему является первоначальным пустым объектом.

Для примера 2, ведут себя, как в примере 1 вам нужно будет обновить код, как это:

var x = document.createElement('div'); 
var y = document.createElement('div'); 
var z = $(); 
z=z.add(x); 
z=z.add(y); 
console.log(z); 

Как вы можете видеть значение z обновляется.