javascript - 存在 - jquery 要素 削除



jQuery:存在しない場合はDOM要素を追加する (2)

長い質問

DOM要素がまだ存在しない場合にのみ追加することは可能ですか?

私はそのような要件を実装しました:

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

2番目の行をよりエレガントなものに置き換えることは可能ですか? ins.siblings('#myIframe:first').is().not().parent().prepend ...

私はins.siblings('#myIframe:first').lengthをチェックしてからIFrameを追加することができますが、好奇心が引き継がれ、できるだけ少ない文章でこれをやろうとしています。


Answer #1

同様のことが必要でしたが、私は常にコードの量を減らそうとしていましたので、この小さなヘルパー関数(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'/>");

Answer #2

私はあなたが提案した方法(長さを数える)は、たとえそれがもう少しコードを含んでいても、最も効率的な方法だと思います:

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

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

また、 :firstセレクタは、そのIDを持つ要素が1つだけである必要があるため、ここでは冗長になります。

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

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

うまくいくでしょう。

編集:Fydoがコメントで言及しているように、長さのチェックも短くすることができるので、最も細かいフォームは次のようになります。

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

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

if条件にセレクタの前に感嘆符があることに注意してください!





dom