JQuery：如何删除重复元素？

Question

假设我有一个包含重复值的链接列表，如下所示：

<a href="#">Book</a>
<a href="#">Magazine</a>
<a href="#">Book</a>
<a href="#">Book</a>
<a href="#">DVD</a>
<a href="#">DVD</a>
<a href="#">DVD</a>
<a href="#">Book</a>

我该如何使用 jQuery 删除重复项，最终得到类似以下的结果：

<a href="#">Book</a>
<a href="#">Magazine</a>
<a href="#">DVD</a>

我想找到一种方法来删除重复的值，并仅显示每个链接中的1个。

- Keith Donegan

Answer 1

var seen = {};
$('a').each(function() {
    var txt = $(this).text();
    if (seen[txt])
        $(this).remove();
    else
        seen[txt] = true;
});

解释：

seen 是一个对象，它将任何先前看到的文本映射到 true。它作为一个包含所有先前看到的文本的集合来起作用。行 if (seen[txt]) 检查文本是否在集合中。如果是，我们已经看到这个文本了，所以我们删除链接。否则，这是我们第一次看到的链接文本。我们将其添加到集合中，以便任何具有相同文本的进一步链接都将被删除。

一种表示集合的替代方法是使用包含所有值的数组。然而，这会使速度变慢，因为要查找数组中是否存在一个值，我们需要每次扫描整个数组。相比之下，使用 seen[txt] 在对象中查找键非常快速。

- interjay

---

Interjay，我感谢你，它完美地运行。另外，您介意解释一下您的代码以便理解吗？ - Keith Donegan

@Keith：添加了一些解释。我假设你知道jQuery each和text函数的作用，所以没有对它们进行解释。 - interjay

如果我只想匹配最后一个单词而不是整个文本怎么办？我不想提出新问题，所以在这里问一下。提前感谢 :) - JavaTechnical

简单而有效 :) - Michael Harper

请使用这个答案。避免使用 .unique jQuery 方法，因为它在这种特定情况下是无用的且不起作用。 - Alexander Dixon

Answer 2

使用jQuery方法$.unique()

详情请参见http://api.jquery.com/jQuery.unique/

- Vladimir

---

为什么 所包含的jQuery方法 只有4个赞，而一个有8行副作用的代码却有29个赞并被接受了呢？ - Inaimathi

也许是因为这个答案不正确。如果两个元素的文本相同，$.unique会都保留它们，所以这并不是问题所要求的。$.unique只有在数组中有两个对同一个DOM元素的引用时才有用，而这里并非如此。 - interjay

另外，$.unique 只会从数组中删除条目，而不会从 DOM 中删除它们。 - interjay

有一种方法可以使用$.uniqueSort()来执行此任务。例如，请参见链接。 - Prince Deekay

从jQuery 3.0开始，此方法已被弃用，仅是jQuery.uniqueSort()的别名。请改用该方法。 - yogihosting

Answer 3

// use an object as map
var map = {};
$("a").each(function(){
    var value = $(this).text();
    if (map[value] == null){
        map[value] = true;
    } else {
        $(this).remove();
    }
});

- coolnalu

Answer 4

@interjay @Georg Fritzsche

你们的修复方法在我的情况下没有起作用，所以我构建了一个不同的版本：

var seen='';
   $('a').each(function(){
        var see=$(this).text();
        if(seen.match(see)){
            $(this).remove();}
        else{
            seen=seen+$(this).text();
        }
    });

希望这为其他人提供了一个有效的备选短期解决方案。

- Ben Muircroft

---

我刚偶然发现这个问题...没有理由 @interjay 的方法不起作用，而且这可能会导致误报...如果你有三个带有这些文本的链接：“a”、“b”和“ab”，则“ab”链接将被删除... - Salketer

Answer 5

$(document).ready(function(){
   $("select").each(function () {
       var selectedItem = $(this).find('option').filter(':selected').text();
       var selectedItemValue = $(this).find('option').filter(':selected').val();
       $(this).children("option").each(function(x){
           if(this.text == selectedItem && $(this).val() != selectedItemValue) {
               $(this).remove();
            }
        });
    }); 
});

- Saleh

---

很抱歉，我只是提供了一个想法，但上面的代码片段将保留所选项目并删除所选项目的重复项。 - Saleh

Answer 6

一个快速简单的方法是

$("a").​​​​​​​​each(function(){
    if($(this).parent().length)
        $("a:contains('" + $(this).html() + "')").not(this).remove();
});​

- Anders Mattson

Answer 7

大家好，这是我的解决方案。

for (i = 0; i < $('li').length; i++) {
  text = $('li').get(i);
  for (j = i + 1; j < $('li').length; j++) {
    text_to_compare = $('li').get(j);
    if (text.innerHTML == text_to_compare.innerHTML) {
      $(text_to_compare).remove();
      j--;
      maxlength = $('li').length;
    }
  }
}

问候

- Eduardo Telaya

Answer 8

$('.photo').each(function (index) { 
    if (index > 0) { 
        $(this).remove(); 
    } 
});

- user32285

---

除了第一个“Book”之外，这将删除每个链接。 - Ben