jQuery - 如果不存在则创建元素 - 一种更短的方法答案

【问题标题】：jQuery - create element if doesn't exist - a shorter wayjQuery - 如果不存在则创建元素 - 一种更短的方法
【发布时间】：2017-05-05 00:35:26
【问题描述】：

如何确定某个元素是否有另一个元素作为子元素？如果没有，添加一个新的，然后返回它。

我试过了：

var myel = ($('> div.my', this).length > 0)
    ? $('> div.my', this)
    : $(this).append('<div class="my"></div>').css('opacity', 0);

但即使它创建我的元素，如果它不存在，它也不会返回它......

【问题讨论】：

$(this).children('div.my') 比$('> div.my', this) 更快更容易理解
jsfiddle.net/thomas4g/rNT8k/1

标签： javascript jquery jquery-selectors

【解决方案1】：

这个怎么样？

var myel = $('> div.my', this).length ? $('> div.my', this) : $('<div class="my"></div>').css('opacity', 0).appendTo(this);

【讨论】：

更小更通用：var $myel = $('div#myel').length ? $('div#myel') : $('<div id="myel">');

【解决方案2】：

我会这样做：

var myDivs = $('div.container').children('div.my');
if(myDivs.length === 0){
    myDivs = $('<div class="my"></div>   ')
        .appendTo('div.container')
        .css('opacity', 0);     
}

我的理由是你只需要查询一次孩子，所以如果孩子很多，这会节省一些时间。

另外，如果没有孩子，那么你创建一个，appendTo 容器，执行 css 然后返回它。

【讨论】：

【解决方案3】：

类似于 Alastair 的方法，但使用了过滤器：

$('div.outerDiv:not(:has(div.my))').each(function(){
  $('<div class="my"></div>')
    .appendTo(this)
    .css('opacity', 0);
});

【讨论】：

【解决方案4】：

我知道的晚了，但方法不同，添加语法糖并使 IMO 清晰易读：

function ifNotExists($x){
    if(!$x || $x.length === 0) return { create : function(newX){ return newX; }}
    else return { create : function(){ return $x } };
}

//usage:
$someDiv.append(ifNotExists("div.child").create("<div class='child'>"));

【讨论】：