jQuery: dodawanie elementu DOM jeśli nie istnieje

Question

Długi zapytania

to możliwe, aby dodać elementu DOM tylko jeśli nie już istnieje?

Przykład

I wprowadziły wymóg tak:

var ins = $("a[@id='iframeUrl']"); 
ins.siblings('#myIframe:first').remove().end().parent().prepend('<iframe id="myIframe" src="'+ins.attr("href")+'"></iframe>'); 

Czy to możliwe, aby zastąpić drugą linię z czegoś bardziej eleganckiego? Podobnie jak ins.siblings('#myIframe:first').is().not().parent().prepend ...

Mogłem sprawdzić ins.siblings('#myIframe:first').length, a następnie dodać IFrame, ale ciekawość przejęła i staram się to zrobić w jak najmniejszej ilości możliwych wyciągów.

Answer 1

myślę tak, jak sugeruje (długość liczenie) jest najbardziej skutecznym sposobem, nawet jeśli ma to dotyczyć nieco więcej kod:

var ins = $("a[@id='iframeUrl']"); 

if(ins.siblings('#myIframe:first').length == 0) 
    ins.parent().prepend('<iframe id="myIframe" src="'+ins.attr("href")+'"></iframe>'); 

również selektor :first byłoby zbędne tu jak nie powinien jedynie kiedykolwiek będzie jeden element z tym identyfikatorem, więc:

var ins = $("a[@id='iframeUrl']"); 

if($('#myIframe').length == 0) 
    ins.parent().prepend('<iframe id="myIframe" src="'+ins.attr("href")+'"></iframe>'); 

również będzie działać.

Edycja: jak Fydo wymienia w komentarzach, sprawdzenie długość może również zostać skrócona, więc tersest forma będzie:

var ins = $("a[@id='iframeUrl']"); 

if(!$('#myIframe').length) 
    ins.parent().prepend('<iframe id="myIframe" src="'+ins.attr("href")+'"></iframe>'); 

Uwaga wykrzyknik przed dźwignią zmiany biegów w jeśli warunek!

Answer 2

Potrzebowałem czegoś podobnego i zawsze staram się zredukować ilość kodu, więc napisałem tę małą funkcję pomocniczą (TypeScript).

$.fn.getOrAddChild = function(selector: string, html: string): JQuery { 
    var $parent = <JQuery>this; 
    if (!$parent.length) 
    throw new Error("Parent is empty"); 
    var $child = $parent.children(selector); 
    if (!$child.length) 
    $child = $(html).appendTo($parent); 
    return $child; 
} 

// Usage 
$("div.myDiv").getOrAddChild("div.myChildDiv", "<div class='myChildDiv'/>");