从附加元素获取 jQuery 对象的更简单方法

Posted 2023-03-06

【中文标题】从附加元素获取 jQuery 对象的更简单方法

【英文标题】：Easier way to get a jQuery object from appended element

【发布时间】：2010-11-29 10:01:36

【问题描述】：

有没有更简单/更快的方法来使用 jQuery append 添加元素：

如何获取 $selectors 元素：

$container.append('<div class="selectors"></div>');
var $selectors = $('.selectors', $container);

我试过了：

var $selectors = $container.append('<div class="selectors"></div>');

但这使得 $selectors = $container

也许这是最快/最好的方法。只是检查。

【参考方案1】：

为什么不只是：

var el = $('<div class="selectors"></div>');
$container.append(el);

?

那么你就可以访问“el”了。

【讨论】：

嗯。如果$container 在这种情况下有多个元素会发生什么？就我而言，我想将一些内容附加到选择器匹配的所有实例并获取已创建元素的集合。

这不适用于$container jsfiddle.net/onL028ty 的多个实例。使用appendTo 技巧代替jsfiddle.net/6nmdh84e

【参考方案2】：

这是我最喜欢的做法：

var $selectors = $('<div class="selectors"></div>').appendTo(container);

【讨论】：

+1 - 我也是。在将新创建的元素附加到 DOM 之前，您需要对它执行所有操作。

【参考方案3】：

$selectors = $('<div/>').addClass('selectors').appendTo($container);

【讨论】：

好信息，谢谢。与其他答案相比，这对我来说有点冗长，但我想知道它是否在性能方面做得更好？在我的特定情况下，性能不是问题，但可能对其他人来说。

【参考方案4】：

您也可以创建一个新的 jQuery 函数来执行此操作：

jQuery.fn.addChild = function(html) 
                               
    var target  = $(this[0])                            
    var child = $(html);                                                      
    child.appendTo(target);                                                   
    return child;                                                             
;  

然后像这样使用它：

$('<ul>').addChild('<li>hi</li>');

当然，如果您想添加多个项目：

var list = $('<ul>');
list.addChild('<li>item 1</li>');
list.addChild('<li>item 2</li>');

这样的方法的优点是以后您可以根据需要向“addChild”函数添加更多内容。请注意，对于上述两个示例，您都需要将元素添加到文档中，因此完整示例可能是：

$('body').addChild('<ul>').addChild('<li>hi</li>');

【讨论】：

我认为这个答案的最后一部分只会增加混乱；附加到文档不是问题的一部分。你可以让它像cletus 一样简单，让读者想象$container 是一个UL。 $container.append('hi');总之，很棒。谢谢。