Question

为什么这不起作用？

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

从空集合开始并向其添加元素的正确方法是什么？我想遍历一组id并在页面上找到元素并将其添加到匹配的集合中。

Answer 1

引用jQuery website：

给定一个表示一组DOM元素的jQuery对象，.add()方法从这些元素的并集和传递给方法的元素构造一个新的jQuery对象。

因此，当你执行.add()时，它不会保存添加的元素，你必须明确地将元素分配给新创建的对象，即

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

Answer 2

.add()方法返回新jQuery对象，因此您需要覆盖旧的

spans = spans.add( elem );

...或者由于您要添加DOM元素，因此可以使用.push()修改现有的jQuery对象。

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

如果你正在寻找从jQuery对象中选择的push或add项，你也可以这样做：

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

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

另一种方法。

Answer 5

你真正想做的是使用jQuery来充分发挥其潜力。您可以使用选择器立即抓取并创建集合。你上面的三行变成了一行：

var spans = $('#someId');

要向集合添加更多ID，您可以用逗号分隔它们：

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

Answer 6

可能有更好的方法来做你正在尝试的事情，但如果你只想创建一个空的jQuery对象，请使用：

var $foo = $([]);

<小时/> 编辑：我应该澄清一下 - 你的代码实际应该工作，除非你使用旧版本的jQuery，在这种情况下$()将创建一个包含document对象的集合。然而，在较新的版本中，没有任何问题。我粘贴的代码片段只适用于旧版本和较新版本的jQuery。

编辑2：回答问题的这一部分：“我想遍历一组id并在页面上找到该元素并将其添加到匹配的集合”，以下代码可能是有用：

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

Answer 7

虽然这并没有直接回答“如何附加到现有的jQuery选择”的问题，但我还是针对这个特定的用例进行了解决。

你可以将一个DOM元素数组传递给jQuery，它将从中创建一个jQuery选择。

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

我想不出有什么理由为什么你需要一次一个地添加每个元素到jQuery选择，而不是一次性，所以这应该是“drop-in-替换“为您的用例。从理论上讲，这也必须证明更有效，因为jQuery的.add()最终只是在幕后的某些数组上调用.push()。

Answer 8

尝试

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

代替

Answer 9

您的代码不起作用的原因是因为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

jQuery添加元素到空选择？

9 个答案: