jQuery: DOM 要素が存在しない場合は追加する 質問する

jQuery: DOM 要素が存在しない場合は追加する 質問する

長い質問

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...

確認してから IFrame を追加することもできますins.siblings('#myIframe:first').lengthが、好奇心が勝ってしまったので、できるだけ少ないステートメントでそれを実行しようとしています。

ベストアンサー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その 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 条件のセレクターの前の感嘆符に注意してください。

おすすめ記事