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

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

Аналогично методу Аластера, но с использованием фильтров:

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