jQuery"获取或创建元素"的便捷方法

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中的哪个位置？

这是你应该使用辅助方法做的事情:

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

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

    return container;
}

然后像这样使用它:

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