Question

这是示例代码解释我想要的：

<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
</div>

jquery的代码：

var $newDiv = $("<div/>")
.addClass("targetClass")
$(".someClass").append($newDiv);

结果是在div数字3中添加一个TargetClass，并在第一个和第二个div中重复相同的类。

问题是我如何在上一个div中添加课程而不是在另一个div中重复课程。

Answer 1

根据您的代码判断，您希望将新div作为.someClass div的兄弟，而不是其子代。

只需更换此行

即可

 $(".someClass").append($newDiv);

通过

 $( "div[id]:not(:has(.targetClass))" ).append($newDiv); //will append new div to all those divs which doesn't have child element with targetclass

var $newDiv = $("<div/>").addClass("targetClass");
$( "div[id]:not(:has(.targetClass))" ).append($newDiv);

Demo

Answer 2

使用.last（）将选择您要搜索的最后一个元素。

jQuery(".someClass").last().append($newDiv);

Answer 3

我认为你有父div的唯一ID，因为如果它是在多个元素上应用的实际ID， someId 无效，这使得标记无效。

使用.last().parent()将元素作为兄弟元素放置，因为它们共享同一个父元素：

var $newDiv = $("<div/>")
  .addClass("targetClass").html('dynamic target element.')

$(".someClass").last().parent().append($newDiv);

div{border:solid 1px red; margin:10px 0 0 0;}
div div{border:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someId-1">
  <div class="someClass">some</div>
  <div class="targetClass">target</div>
</div>
<div id="someId-2">
  <div class="someClass">some</div>
  <div class="targetClass">target</div>
</div>
<div id="someId-3">
  <div class="someClass">here after this elem should add</div>
</div>

Answer 4

如果您要将targetClass的div添加到someId的div，如果它不存在，则可以使用find()函数：

if($('#someId').find('.someClass').length == 0) {
   var $newDiv = $("<div/>")
    .addClass("targetClass")
    $("#someId").append($newDiv);
}

通过javascript将类添加到特定元素，而不是重复

4 个答案: