JQuery - создать элемент, если его не существует - более короткий путь

Как я могу узнать, имеет ли какой-то элемент другой элемент в качестве дочернего? И если это не так, добавьте к нему новый, а затем верните его.

Я попробовал:

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

но даже если он создает мой элемент, если он не существует, он не возвращает его...

Ответы

Ответ 1

Как насчет этого?

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

Ответ 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

Поздно, я знаю, но другой подход, добавляющий синтаксический сахар и делая вещи разборчивыми ИМО:

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