2012-06-27 4 views
2

Я хочу создать некоторые узлы DOM с помощью jQuery, добавить их в html, сохраняя их выбранными, поэтому мне не нужно их снова выбирать.jQuery: Как создать новый элемент и добавить его в коллекцию?

Это мой код:

var foo=$(''); 
for(var i=0;i<10;i++){ 
    var bar=$('<div>'); 
    $('body').append(bar); 
    foo.add(bar); 
} 

Видимо Foo будет держать как пустые, в конце концов, так что это не сработает. Как мне с этим справиться, не выбирая в конце все бары?

ответ

2

Причиной этой проблемы является .add() метод не изменяет исходный объект коллекции JQuery, но возвращает новый.

Вы можете просто изменить свой код: The DEMO.

var foo=$(''); 
for(var i=0;i<10;i++){ 
    var bar=$('<div>'); 
    $('body').append(bar); 
    foo = foo.add(bar); 
} 

console.log(foo); 
+0

Я тоже нарушил свое мнение: но решение было так просто! – VisioN

+0

Спасибо вам, а также @VisioN, я возьму это как принято, потому что это более родное решение jQuery, и вы ответили ранее :) –

3

Вы можете использовать массив, а не объект JQuery:

var foo = []; 
for(var i=0; i < 10; i++) { 
    var bar = $('<div>'); 
    $('body').append(bar); 
    foo.push(bar[0]); 
} 
foo = $(foo); 
+0

Я хотел бы добавить 'Foo = $ (Foo),' после 'for' петли так, что' foo' теперь указывает на объект jQuery, содержащий элементы, или создает новую переменную, содержащую объект jQuery с элементами. –

+0

@AnthonyGrist Это не работает точно так же, как коллекция jQuery, например. вы не можете использовать 'foo.css ({'foo': 'bar'})' после этого. –

+1

@ XunYang Взгляните на [этот jsFiddle] (http://jsfiddle.net/UaA7z/). Вам нужно будет изменить строку 'foo.push (bar);' с помощью 'foo.push (bar [0]);', чтобы вы сохраняли фактический элемент DOM в массиве, а не объект jQuery, содержащий элемент DOM. –

1

Для добавления новых элементов в коллекции использования JQuery foo = foo.add(bar).

Вот обновленная версия кода:

var foo = $(); 
for (var i = 0; i < 10; i++) { 
    var bar = $("<div />").appendTo("body"); 
    foo = foo.add(bar); 
} 
foo.css("color", "red"); 

DEMO:http://jsfiddle.net/u3efP/

Смежные вопросы