Question

如何判断某个元素是否还有另一个元素？如果没有，请添加一个新的然后返回。

我尝试过：

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

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

Answer 1

这个怎么样？

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

Answer 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然后返回它。

Answer 3

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

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

Answer 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'>"));

jQuery - 如果不存在则创建元素 - 更短的方式

4 个答案: