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

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

我没有发现这在搜索jQuery文档中存在，但我想我会问这里是否有其他人遇到过类似问题并有建议。

Answer 1

您可以使用这个写得不好的代码：

var $element = $('#element').length ? $('#element') : $('
').appendTo('#containerToPutIt'); 

或者让它更清洁：

 var $element = $('#element'); if(!$element.length) $element = $('
').appendTo('#containerToPutIt'); 

Answer 2

在jQuery中确实没有一个地方可以保证有足够的信息来创建一个元素（如果它不存在）。 例如，如果你做$('#something') ，并且你希望jQuery确保它存在，你期望jQuery创建什么元素？ 你想把它放在DOM里的哪个位置？

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

 function getContainer() { var container = $('.yourContainer'); if (!container.length) { 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插入方法在任何位置创建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 = $(""); $(this).append($el); } return $el; }; 

然后你可以像这样使用：

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

理想情况下，简单地传入一个选择器并让jQuery创建一个自动匹配该选择器的元素会很好，但似乎没有一个轻量级的工具来创建一个基于CSS Selector语法的元素 （基于问题） 1和问题2 ）。

一些进一步的增强可能会为DOM插入提供更精细的调整控制，而不是总是使用.append() 。

演示jsFiddle | Stack Snippets中的演示：

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

  
 
 A B C