检查 JS/JQuery 中是否已存在具有特定值的子元素后如何添加子元素？

Question

所以我一直在尝试弄清楚，在检查子 div 元素是否包含 JS/JQuery 中的特定文本后，如何将 div 元素附加到现有的 div 元素。

我的 HTML：

<div id="mii">
</div>

我的 JQuery：

$(document).ready(function (){
        $("#mii").click(function(){
       if($("#mii div span:contains('foo')") == false){
                $("#mii").append("<div class='mii-item'><span>foo</span></div>");
       }
    });
});

我的CSS（虽然不太相关）：

#mii{
  background-color: gray;
  width: 100%;
  height: 100%;
  padding: 5px;
}
#mii:hover{
  cursor: pointer;
}

.mii-item{
  background-color: yellow;
  padding: 5px;
}

我不明白为什么它不起作用，即使我调试了它并尝试了各种方法，所以欢迎任何帮助！

链接到JSFiddle

Answer 1

JQuery 选择器将返回一个类似于 DOM 元素的数组。
通过

console.log($("#mii div span:contains('foo')"))

查看输出。
所以你需要检查数组的长度是否包含匹配的元素。

$(document).ready(function (){
        $("#mii").click(function(){
       if($("#mii div span:contains('foo')").length === 0){
                $("#mii").append("<div class='mii-item'><span>foo</span></div>");
       }
    });
});