使用each（）在div中查找重复的类

Question

<div class="d">
    <p class="head"></p>
</div>

<div class="d">
    <p class="head"></p>
</div>

<div class="d">
    <p class="head"></p>
</div>

<div class="d">
    <p class="head"></p>
    <p class="head"></p>
</div>

<div class="d">
    <p class="head"></p>
</div>

我有几个'.d'块，如何使用each（）来查找'.head'是否多于一个？如果是，请删除重复的'.head'

$('.d').each(function(index, value){
// find duplicated .head
}

Answer 1

尝试使用.not()功能和:eq()选择器来实现您的目标，

$('.d').each(function(){
 $(".head",this).not(":eq(0)").remove();
});

DEMO

Answer 2

您不需要使用.each，只需使用与第一个之后的所有重复项匹配的选择器。

$(".d .head:not(:nth-child(0))").remove();

Answer 3

直接你可以在一个声明中做到：

$('.d').find(".head:gt(0)").remove();

Answer 4

您还可以使用：first-child

$('button').click(function() {
  $(".d .head:not(:first-child)").remove();
})

.d {
  border: 1px solid red;
  padding: 5px;
  margin-bottom: 5px;
}
.d .head {
  border: 1px solid green;
  padding: 5px;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d">
  <p class="head"></p>
</div>

<div class="d">
  <p class="head"></p>
</div>

<div class="d">
  <p class="head"></p>
</div>

<div class="d">
  <p class="head"></p>
  <p class="head"></p>
</div>

<div class="d">
  <p class="head"></p>
</div>
<button>Remove</button>