如果元素存在，请不要追加元素

Question

使用.length检查div是否存在且是否存在.append不应添加新div。

https://jsfiddle.net/uhvL1hfx/

HTML

<div class="container">
  <div class="inner">
    <div class="field">
    This div exist, so .append should not add a new div, should add only if this div does not exist.
    </div>
  </div>
</div>

的jQuery

if( $("div.container div.inner div.field").length ){
    $("div.container div.inner").append("<div>But for some reason it still adds it.</div>");
}

但它仍然附加一个新的div。如果div.field不存在，则应附加。

Answer 1

您的条件应为$("div.container div.inner div.field").length == 0，以便在附加容器div之前检查该类中是否没有其他元素。

if( $("div.container div.inner div.field").length == 0){
    $("div.container div.inner").append("<div class=\"field\">But for some reason it still adds it.</div>");
}

我还将field的类赋予了你要附加的div，以便下次执行代码时条件将失败，因为现在在容器div中存在一个给定类的div。

Answer 2

因为您的代码已经有div.field所以长度=== 1 你想要的是这样的：

if( $("div.container div.inner div.field").length > 0){


}else{
    $("div.container div.inner").append("<div class=\"field\">But for some reason it still adds it.</div>");
}