Question

我正在尝试制作动态生成的内容（图像，文本，视频），有时有些新内容是重复的。

如何修改此jQuery调用以删除所有重复的元素？

$(".parent").children(:not[unique]).remove();

例如，当我单击“添加更多”按钮后，我得到了Ajax内容，其中有些是重复的，下面是重复内容的示例，因此如何动态删除重复的内容：

<button class="btn">ADD MORE</button>
<div class="parent">
<div class="child">hello</div>
<div class="child">hello</div>
<img class="flower_image" src="/pictures/flower.jpeg">
<img class="flower_image" src="/pictures/flower.jpeg">
<video class="trailer_video" src="/videos/trailer.flv"></video>
<video class="trailer_video" src="/videos/trailer.flv"></video>
<span class="span_text">hello world></span>
<span class="span_text">hello world></span>
<a class="hyper_link" src="www.example.com"></a>
<a class="hyper_link" src="www.example.com"></a>
</div>

Answer 1

如果您引用$.unique()（从3.0开始不推荐使用$uniqueSort() ...）

这用于从元素数组中过滤重复的元素...因此，如果同一元素在数组中出现多次，则重复的元素会被滤除。

请注意，即使两个不同元素的内容相同，也不应视为重复元素。

包含重复项的数组的示例：

var array=[];

$(".parent").children().each(function(){
  for(i=0;i<10;i++){
    array.push(this);
  }
});

console.log(array.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="parent">
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Having fun?</li>
</ul>

所以应该有3个元素...但是由于脚本设计很奇怪（这里打算），所以有30个元素。

有时候，您可能会收集所有class1元素，然后向其中添加class2元素。如果某个元素同时具有两个类怎么办？这是一种过滤方式。

var array=[];

$(".parent").children().each(function(){
  for(i=0;i<10;i++){
    array.push(this);
  }
});

array = $.unique(array);

console.log(array.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="parent">
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Having fun?</li>
</ul>

但是不行，这将过滤示例中重复的“ Hello world” ...，因为它们是不同的元素。

Answer 2

我要求您提供一些标记，其中有重复的标记，以寻找可利用的“模式”。而且您提供了一些标记，这些标记看起来确实不像真正的用例标记。示例：一个save()通常内部有一些<video>标签和一个结束标签...而<source>无效。我很想根本不回答...由于缺乏认真的态度。

但是我后来想到了可能会起作用的事情……

因此，这是适用于所提供示例的代码...在您实际的标记上可能会正常工作，并且可能会有很多问题。

这是首发，没有任何保证。您必须从这里自己进行改进。在下面查看有关其工作原理的说明。

</img>

$(".clean").on("click",function(){

  var all_elements = $(".parent").children();

  all_elements.each(function(){
    var el_class = this.className;
    var el_src = this.src;
    var el_text = $(this).text();

    // data("verified") prevents the removal triggered by it's duplicate, if any.
    $(this).data("verified",true);

    all_elements.each(function(){
      if(el_class==this.className && el_src==this.src && el_text==$(this).text() && !$(this).data("verified")){
        $(this).remove();
      }
    });
  });
  
  // Turn all "surviving" element's data("verified") to false for future "clean".
  $(".parent").children().each(function(){
    $(this).data("verified",false);
  });
});

.parent>*{
  border:1px solid black;  /* Just to make empty element more obvious in this demo */
}

在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn clean">CLEAN DUPLICATES</button><br> <br> <div class="parent"> <div class="child">hello</div> <div class="child">hello</div> <img class="flower_image" src="/pictures/flower.jpeg"> <img class="flower_image" src="/pictures/flower.jpeg"> <video class="trailer_video" src="/videos/trailer.flv"></video> <video class="trailer_video" src="/videos/trailer.flv"></video> <span class="span_text">hello world></span> <span class="span_text">hello world></span> <a class="hyper_link" src="www.example.com"></a> <a class="hyper_link" src="www.example.com"></a> </div>的所有子元素上有两个嵌套的.each()循环。

它比较两个属性：

.parent（元素的类列表）
className

及其包含的文本。

如果某项为空或未定义，则没关系，因为它查找的重复项也应该为空或未定义。

最后，有一个src值用作标记，以防止删除先前比较的对象元素。

如何使用jQuery unique删除重复的元素？

2 个答案: