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选择器在这里是多余的，因为只有一个元素具有该ID，所以：

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条件中选择器前的感叹号！

Answer 2

我需要类似的东西，我总是尝试减少代码量，所以我编写了这个小帮助函数（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'/>");

jQuery：添加dom元素（如果它不存在）

2 个答案: