jQuery добавить элементы в пустой выбор?

Question

Почему это не работает?

var spans = $();
var elem = document.getElementById('someId');
spans.add(elem);

Как правильно начать с пустой коллекции и добавить в нее элементы?Я хочу просмотреть коллекцию идентификаторов, найти элемент на странице и добавить его в соответствующий набор.

Answer 1

Цитирование с веб-сайта jQuery :

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

Следовательно, когда вы делаете .add(), он не будет сохранять добавленные элементы, вам придется явно назначить элемент длянедавно созданный объект т.е.

var $elements = $('.elements');
$elements = $elements.add($('#anotherelement'));

Answer 2

Метод .add() возвращает новый объект jQuery , поэтому вам потребуется перезаписать старый:

spans = spans.add( elem );

... или поскольку вы добавляете элементы DOM, вы можете изменить существующий объект jQuery с помощью .push().

spans.push( elem );

---

РЕДАКТИРОВАТЬ: Изменено .pushStack() на .push(), хотя я не знаю, официально ли поддерживается .push().

---

Вы можете использовать .pushStack() для добавления коллекции.

spans = spans.pushStack( [elem] );

или

spans = spans.pushStack( document.getElementsByTagName('div') );

Answer 3

Полагаю, я не понимаю, о чем вы спрашиваете.Если у вас есть элемент, и вы хотите добавить его в коллекцию, вы просто используете метод .add(), как вы уже показали.Что смущает некоторых, так это то, что это возвращает новый объект jQuery, поэтому вы должны сделать это так:

var spans = $();
var elem = document.getElementById('someId');
spans = spans.add(elem);

Конечно, что-то вроде этого будет короче:

var spans = $();
spans = spans.add('#someId');

ИКонечно, вам не нужно начинать с пустого объекта.Вы бы просто начали с:

var spans = $('#someId');

Answer 4

Если вы ищете push или add элементов, выбранных из объекта jQuery, вы также можете сделать это:

var $els = $(),
    $someEls = $(".some-els");

$els.push.apply($els, $someEls);

Просто еще один способ сделать это.

Answer 5

Что вы на самом деле хотите сделать, так это использовать jQuery в полной мере. Вы можете использовать селекторы, чтобы захватить и создать коллекцию прямо сейчас. Ваши три строки выше становятся одной строкой:

var spans = $('#someId');

чтобы добавить больше идентификаторов в коллекцию, вы можете разделить их запятыми:

var spans = $('#someId1, #someid2, #someid3');

Answer 6

Хотя это не дает прямого ответа на вопрос «как добавить к существующему выбору jQuery», у меня есть обходной путь для этого конкретного варианта использования.

Вы можете передать массив элементов DOM в jQuery, и он создаст из них выборку jQuery.

var spansArray = [];
var elem = document.getElementById('someId');
spansArray.push(elem);
var spans = $(spansArray);

Я не могу придумать причину, по которой вам нужно было бы добавлять каждый элемент в выборку jQuery по одному, а не все сразу, так что это должно быть замена "для вашего случая использования. Теоретически, это также должно оказаться более эффективным, поскольку jQuery .add() в конечном итоге просто вызывает .push() для некоторого негласного массива.

Answer 7

Возможно, есть лучшие способы сделать то, что вы пытаетесь, но если вы просто хотите создать пустой объект jQuery, используйте это:

var $foo = $([]);

Изменить: я должен уточнить - ваш код на самом деле должен работать, если вы не используете более старую версию jQuery, в этом случае $() создаст коллекцию, содержащую объект document.В новых версиях, однако, нет ничего плохого в этом.Фрагмент кода, который я вставил выше, просто должен работать в старых версиях и новых версиях jQuery.Редактировать 2: В ответ на эту часть вопроса: «Я хочу просмотреть коллекцию идентификаторов, найти элемент на странице и добавить его в соответствующий набор» , следующий код может быть полезен:

var ids = ['foo', 'bar', 'baz'],
    selector = $.map(ids, function(i, id) {
        return '#' + id;
    }).join(','),
    $collection = $(selector);

Answer 8

Причина, по которой ваш код не работает, заключается в том, что add не изменяет коллекцию, она возвращает новый объект jQuery с новыми элементами в нем.Если бы вы хотели, вы могли бы вместо этого сказать spans = spans.add(elem);, но то, что вы делаете, не нужно: прелесть jQuery в том, что он делает этот вид императивного программирования ненужным.Посмотрите на ответ helloandre для более простого способа достижения вашей цели.

Это похоже на следующее, если это имеет смысл:

var x = [1, 2, 3];
x.concat(4);
console.log(x); // [1, 2, 3] -- concat does not mutate the original array

Answer 9

Попробуйте

var spans = $("<span />");
var elem = $("#someId").html();
spans.append(elem).appendTo('#someAnotherId');

вместо