jQuery "get or create element“便捷方法

Question

我有两个生成DOM元素的函数。它们都试图创建相同的容器元素。(我不希望强制执行这些函数的特定运行顺序，或者将它们与创建此元素的副作用紧密耦合在一起)。我一直在尝试发现一种方法，如果元素存在，则获取该元素，如果不存在，则创建该元素的单个实例，并返回包含该元素或所有匹配元素的jQuery对象(如果它们已经存在)。

我在搜索jQuery文档时没有发现这一点，但我想我应该在这里询问一下是否有人遇到过类似的问题并有建议。

Answer 1

你可以使用这个写得很差的代码：

var $element = $('#element').length ? $('#element') : $('<div id="element"></div>').appendTo('#containerToPutIt');

或者让它更干净一点：

var $element = $('#element');
if(!$element.length)
    $element = $('<div id="element"></div>').appendTo('#containerToPutIt');

Answer 2

在jQuery中，如果一个元素不存在，也不能保证您有足够的信息来创建该元素。例如，如果您使用$('#something')，并且希望jQuery确保它存在，那么您希望jQuery创建什么元素？您希望它位于DOM中的什么位置？

这是你应该用一个helper方法自己做的事情：

function getContainer() {
    var container = $('.yourContainer');

    if (!container.length) {
        container = $('<div class="container" />').appendTo('#something');
    }

    return container;
}

然后像这样使用它：

getContainer().html('Foo Bar Baz');
getContainer().children().each(..);

Answer 3

您可以在jQuery中选择DOM元素，然后测试其长度：

if ($('div.someclass').length > 0) {...}

不要测试是否存在jQuery对象，因为即使其中没有DOM元素，它也总是返回true。您必须始终测试它的长度。

如果length测试失败，则可以使用适当的DOM insertion method在任何需要的地方创建DOM元素。