jQuery: डोम तत्व जोड़ अगर यह

Question

लांग सवाल

क्या यह संभव है मौजूद नहीं है किसी DOM तत्व केवल अगर यह पहले से ही मौजूद नहीं है जोड़ने के लिए?

उदाहरण

मैं तो जैसे आवश्यकता को लागू किया है:

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

इसे और अधिक सुंदर कुछ के साथ दूसरी पंक्ति को बदलने के लिए संभव है? ins.siblings('#myIframe:first').is().not().parent().prepend की तरह ...

मैं ins.siblings('#myIframe:first').length देख सकता हूं और फिर IFrame जोड़ सकता हूं, लेकिन जिज्ञासा खत्म हो गई और मैं इसे कम से कम बयानों में संभवतः करने की कोशिश कर रहा हूं।

Answer 1

मुझे लगता है कि जिस तरह से आप का सुझाव दिया (गिनती लंबाई) सबसे कारगर तरीका है, भले ही उसे कुछ अतिरिक्त कोड को शामिल करता है:

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

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

इसके अलावा, :first चयनकर्ता यहां बेमानी होगा के रूप में वहाँ केवल चाहिए कभी भी उस आईडी के साथ एक तत्व हो, इसलिए:

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

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

भी काम करेगा।

संपादित करें: अगर हालत में चयनकर्ता से पहले

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

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

नोट विस्मयादिबोधक चिह्न के रूप Fydo टिप्पणी में उल्लेख है, लंबाई की जांच भी छोटा किया जा सकता है, तो tersest प्रपत्र होगा!

Answer 2

मुझे कुछ समान की आवश्यकता है और मैं हमेशा कोड की मात्रा को कम करने की कोशिश करता हूं, इसलिए मैंने यह छोटा सहायक फ़ंक्शन (टाइपस्क्रिप्ट) लिखा।

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