JQuery добавить элементы в пустой выбор?
Почему это не работает?
var spans = $();
var elem = document.getElementById('someId');
spans.add(elem);
Каков правильный способ начать с пустой коллекции и добавить к ней элементы?
Я хочу перебрать коллекцию идентификаторов и найти элемент на странице и добавить его в соответствующий набор.
Ответы
Ответ 1
Цитата из сайта jQuery:
Учитывая объект jQuery, представляющий набор элементов DOM, метод .add()
создает новый объект jQuery из объединения этих элементов и те, которые передаются в этот метод.
Следовательно, когда вы .add()
, он не сохранит добавленные элементы, вам придется явно назначить элемент вновь созданному объекту, т.е.
var $elements = $('.elements');
$elements = $elements.add($('#anotherelement'));
Ответ 2
Метод .add()
возвращает новый объект jQuery, поэтому вам нужно будет перезаписать старый:
spans = spans.add( elem );
... или поскольку вы добавляете элементы DOM, вы можете изменить существующий объект jQuery с помощью .push()
.
spans.push( elem );
EDIT: Изменен .pushStack()
на .push()
, хотя я не знаю, официально поддерживается ли .push()
.
Вы можете использовать .pushStack()
, чтобы добавить коллекцию.
spans = spans.pushStack( [elem] );
или
spans = spans.pushStack( document.getElementsByTagName('div') );
Ответ 3
Думаю, я не понимаю, о чем вы спрашиваете. Если у вас есть элемент и вы хотите добавить его в коллекцию, вы просто используете метод .add()
, как вы уже показали. Что смущает, так это то, что это возвращает новый объект jQuery, поэтому вы бы сделали это следующим образом:
var spans = $();
var elem = document.getElementById('someId');
spans = spans.add(elem);
Конечно, что-то вроде этого будет короче:
var spans = $();
spans = spans.add('#someId');
И, конечно, вам не нужно начинать с пустого объекта. Вы только начинаете с:
var spans = $('#someId');
Ответ 4
Если вы ищете элементы push
или add
, выбранные из объекта jQuery, вы также можете сделать это:
var $els = $(),
$someEls = $(".some-els");
$els.push.apply($els, $someEls);
Еще один способ сделать это.
Ответ 5
То, что вы на самом деле хотите сделать, это использовать jQuery для его полного потенциала. Вы можете использовать селекторы для захвата и создания коллекции сразу. Ваши три строки выше одной строки:
var spans = $('#someId');
чтобы добавить в коллекцию больше идентификаторов, вы можете разделить их запятыми:
var spans = $('#someId1, #someid2, #someid3');
Ответ 6
Могут быть лучшие способы делать то, что вы пытаетесь, но если вы просто хотите создать пустой объект jQuery, используйте это:
var $foo = $([]);
<ч/" > Изменить: я должен уточнить - ваш код действительно должен работать, если вы не используете более старую версию jQuery, и в этом случае $()
создаст коллекцию, содержащую объект document
. Однако в более новых версиях в этом нет ничего плохого. Фрагмент кода, который я вставил выше, - это то, что должно работать в более старых версиях и более новых версиях jQuery.
Редактирование 2: В ответ на эту часть вопроса: "Я хочу перебирать коллекцию идентификаторов и находить элемент на странице и добавлять его к соответствующему набору", может оказаться полезным следующий код:
var ids = ['foo', 'bar', 'baz'],
selector = $.map(ids, function(i, id) {
return '#' + id;
}).join(','),
$collection = $(selector);
Ответ 7
Хотя это прямо не отвечает на вопрос "как добавить к существующему jQuery-выбору", у меня есть обход для этого конкретного случая использования.
Вы можете передать массив элементов DOM в jQuery, и он будет создавать из них jQuery.
var spansArray = [];
var elem = document.getElementById('someId');
spansArray.push(elem);
var spans = $(spansArray);
Я не могу думать о какой-либо причине, по которой вам нужно будет добавлять каждый элемент в выбор jQuery один раз в то время, в отличие от "все-в-одном", поэтому это должно быть "drop-in- замена" для вашего случая использования. Теоретически это также должно быть более эффективным, поскольку jQuery .add()
в конечном итоге просто вызывает .push()
в некотором массиве за кулисами.
Ответ 8
Try
var spans = $("<span />");
var elem = $("#someId").html();
spans.append(elem).appendTo('#someAnotherId');
вместо
Ответ 9
Причина, по которой ваш код не работает, состоит в том, что add
не изменяет коллекцию, он возвращает новый объект jQuery с новыми элементами в нем. Если бы вы захотели, вы могли бы вместо этого сказать spans = spans.add(elem);
, но то, что вы делаете, не нужно: красота jQuery заключается в том, что это делает ненужным ненужное программирование. Посмотрите на приветственный ответ для гораздо более простого способа достижения своей цели.
Это похоже на следующее, если это имеет смысл:
var x = [1, 2, 3];
x.concat(4);
console.log(x); // [1, 2, 3] -- concat does not mutate the original array