javascript - 从 html 元素中删除重复项

Question

从中删除葡萄重复的最佳方法是什么？有很多方法可以从简单数组中删除重复项，但这将是一个包含 html 元素的数组

 <div class="fruit">
      grapes
 </div>
 <div class="fruit">
      bananas
 </div>
 <div class="fruit">
      grapes
  </div>

我试过使用类似的东西

 $('.fruit').each(function () {
      $('.fruit:has("' + $(this).text() + '"):gt(0)').remove();  
 });

score 3 · Accepted Answer

尝试

var obj = {};
$('.fruit').each(function(){
    var text = $.trim($(this).text());
    if(obj[text]){
        $(this).remove();
    } else {
        obj[text] = true;
    }
})

演示：小提琴

score 2 · Accepted Answer

:has需要一个元素选择器，同时:contains需要一个字符串

见http://api.jquery.com/contains-selector/

所以这应该可以解决问题：

 $('.fruit').each(function () {
      $('.fruit:contains("' + $(this).text() + '"):gt(0)').remove();  
 });

小提琴：http: //jsfiddle.net/kam7E/

score 0 · Accepted Answer

http://jsfiddle.net/S3wXM/1/

假设您只想删除其中一个重复项。

使用contains，如上面的答案，但实现略有不同。

$($("div:contains('grapes')")[0]).remove();

http://api.jquery.com/jQuery.unique/ - 这也可能对你有用。

score 0 · Accepted Answer

var uniqueFruits = [];
$(".fruit").each(function(i,e){
    var thisFruit = $.trim($(e).text());
    if(uniqueFruits.indexOf(thisFruit) == -1)
        uniqueFruits.push(thisFruit);
    else
        $(e).remove();
});

http://jsfiddle.net/a7E9e/

score 0 · Accepted Answer

jsFiddle在这里：http: //jsfiddle.net/THEtheChad/UKRwf/

var found = {};
var $unique_fruits = $('.fruit').filter(function(){
   var data = this.innerHTML.trim();

   if(!found.hasOwnProperty(data)) return found[data] = true;
});

score -1 · Accepted Answer

这是为此工作的小提琴：-

http://jsfiddle.net/HwUUs/1/

$( "div:contains('grapes')" ).remove();

javascript - 从 html 元素中删除重复项

6 回答 6

Related

Reference