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

Question

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

我没有发现在搜索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创建什么元素？你想把它放在哪里？

这是你应该用帮助方法做的事情：

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对象的存在，因为它总是会返回true，即使它内部没有DOM元素。您必须始终测试其长度。

如果length测试失败，您可以使用适当的DOM insertion method在任意位置创建DOM元素。

Answer 4

嗯...有趣的问题......你可能会尝试类似的东西。

function checkExists(selector) {
    var exists = $(selector).length;
    if(exists > 0) {
        return $(selector);
    } else {
        return createElement();
    }
}

createElement()将成为您正在寻找的DOM元素的函数。 （它将返回新创建的元素）然后您可以使用jquery选择器调用它，例如checkExists('.myClass');

Answer 5

让方便的方便方法（除了保持关注点分离!!这里有一个名为 upsert 的jQuery函数，它将找到现有元素或创建新元素（如果不存在）。

所以只需在任何地方包含这个jQuery：

$.fn.upsert = function(selector, htmlString) {
  // upsert - find or create new element
  // find based on css selector     https://api.jquery.com/category/selectors/
  // create based on jQuery()       http://api.jquery.com/jquery/#jQuery2
  var $el = $(this).find(".message");
  if ($el.length == 0) {
    // didn't exist, create and add to caller
    $el = $("<span class='message'></span>");
    $(this).append($el);
  }

  return $el;
}; 

然后你可以这样使用：

$("input[name='choice']").click(function(){
  var $el = $(this).closest("form").upsert(".message", "<span class='message'></span>");
  // guaranteed to have element - update if we want
  $el.html("You've chosen "+this.value)
})

理想情况下，简单地传入选择器并让jQuery自动创建一个与该选择器匹配的元素会很好，但它似乎并不像creating an element那样轻量级的工具基于CSS Selector语法（基于Question 1＆amp; Question 2）。

某些进一步的增强功能可能会为DOM insertion提供更精细的控制，而不是始终使用.append()。

Demo in jsFiddle | Stack Snippets中的演示：

＆＃13;

＆＃13;

$.fn.upsert = function(selector, htmlString) {
  // upsert - find or create new element
  // find based on css selector   	https://api.jquery.com/category/selectors/
  // create based on jQuery()       http://api.jquery.com/jquery/#jQuery2
  var $el = $(this).find(".message");
  if ($el.length == 0) {
    // didn't exist, create and add to caller
    $el = $("<span class='message'></span>");
    $(this).append($el);
  }

  return $el;
}; 

$("input[name='choice']").click(function(){
  var $el = $(this).closest("form").upsert(".message", "<span class='message'></span>");
  // guaranteed to have element - update if we want
  $el.html("You've chosen "+this.value)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">
  <div>
    <input type="radio" id="ca" name="choice" value="A" /><label for='ca'>A</label>
    <input type="radio" id="cb" name="choice" value="B" /><label for='cb'>B</label>
    <input type="radio" id="cc" name="choice" value="C" /><label for='cc'>C</label>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;