Javascript 当规则不再为真时停止追加

我正在进行一个项目，需要克隆span.response11，将其附加到#父级，然后向span.response11添加一个新div。我已经完成了克隆过程，但是在添加新div时，IF语句继续将div添加到已经附加了它的元素中

下面是我的jquery的一个小摆设：

//如果此克隆元素还没有子div.red，请将其追加。
$（“#父项>跨度”）。每个（函数（索引，元素）{
if（$（元素）.not（“：has（.red）”）{
$（元素）.prepend（'这是红色的'）；
}
});

我只想添加一次div.red。如果span.response已经将div.red作为子项，那么jquery不应该再添加div

如何让函数停止添加更多div

如果

span.response

作为子级已经有

div.red

，jQuery不应该再添加

div

您不应该使用

：has

，它用于测试相同的元素。使用

。查找
并检查是否有：

$("#parent > span").each(function(index, element) {
  // Do the below, only when `.red` is not there inside this element.
  if (!$(element).find(".red").length) {
    $(element).prepend('<div class="red">This is red</div>');
  }
});

$（“#parent>span”）。每个（函数（索引，元素）{
//仅当此元素中没有“.red”时，才执行以下操作。
if（！$（元素）.find（“.red”）.length）{
$（元素）.prepend（'这是红色的'）；
}
});

另外，另一方面，我强烈反对您在
中插入
，因为
是一个内联元素，而
是一个块元素
 
has
有点像find，而不是findelement@charlietfl啊。。。我现在明白了，上下文不同<代码>：）
为了更好地回答问题，我添加了更多信息。我认为问题在于克隆actually@charlietfl正是<代码>：）

@PraveenKumar感谢您的回复！使用。查找为我解决了问题。我会记住：has用于测试同一个元素。您正在克隆已附加红色的元素。重新考虑你所有的问题logic@charlietfl我正在克隆元素，然后添加红色。克隆后，我发现在多次单击时可能会出现克隆哪个元素的问题。我必须进行调整，以便克隆span.response内部html并用不同的东西包装。

$("#parent > span").each(function(index, element) {
  // Do the below, only when `.red` is not there inside this element.
  if (!$(element).find(".red").length) {
    $(element).prepend('<div class="red">This is red</div>');
  }
});