Question

可能重复：
jquery remove duplicate li

<ul class="uol">
      <li>beta</li>
      <li>gamma</li>
      <li>alpha</li>
    <li>beta</li>
    <li>zeta</li>
    <li>BETA</li>            
</ul>

我有2个按钮，一个用于突出显示重复的项目，另一个用于删除重复的项目。

我正在尝试使用过滤功能。如果您能解释一下您的代码，我们非常感谢。

Answer 1

<强> HTML

<ul id="list" class="uol">
  <li>beta</li>
  <li>gamma</li>
  <li>alpha</li>
  <li>beta</li>
  <li>zeta</li>
  <li>BETA</li>            
</ul>

<input id="find" type="button" value="Find" />
<input id="remove" type="button" value="Remove" />

<强>的JavaScript

$('#find').click(function(){
  $('#list li').filter(function(){
    return $(this).siblings().text().toUpperCase().indexOf($(this).text().toUpperCase()) != -1;
  }).addClass('selecteditems');
});

$('#remove').click(function(){
  var removed = [];
  $('.selecteditems').each(function(i, item){
    if($.inArray($(item).text().toUpperCase(), removed) != -1){
      $(item).remove();
    }
    else{
      removed.push($(item).text().toUpperCase());
      $(item).removeClass('selecteditems');
    }
  });
});

单击“查找”按钮后，过滤器将应用于ID为<li>的无序列表中的每个list项。然后它获取所有其他<li>项，将它们的文本一起添加到一个字符串中并将其大写。然后，它检查当前<li>项是否为大写字母包含在该字符串中。如果它存在，则返回true，因此它会添加类selecteditems。

当您单击“删除”按钮时，它将删除除<li>类的第一个selecteditems项以外的所有项，并从第一个<li>项中删除该类。

Check it out here.

如果您想要完全确定是在检查单个项目而不是检查所有项目的字符串，则可以更改代码以找到：

$('#find').click(function(){
  $('#list li').filter(function(){
    var sibs = [];
    $.map($(this).siblings(), function(sibling){
      sibs.push($(sibling).text().toUpperCase());
    });
    return $.inArray($(this).text().toUpperCase(), sibs) != -1;
  }).addClass('selecteditems');
});

Answer 2

嗯，你必须将每个项目与其他项目进行比较。为了有效地完成它，我将在所有列表项上有两个普通循环：在第一个循环中计算每个项目根据其文本出现的次数，然后在第二个循环中过滤仅计数大于1的项目。

代码看起来像这样：

function GetDupeItems() {
    var oList = $(".uol");
    var allItems = oList.find("li");
    var mapping = {};
    allItems.each(function(index) {
        var text = $(this).text().toLowerCase();
        if (!mapping[text])
            mapping[text] = 0;
        mapping[text]++;
    });

    return allItems.filter(function() {
        return (mapping[$(this).text().toLowerCase()] > 1);
    });
}

现在标记重复项有：

GetDupeItems().addClass('duplicate');

它会添加一个类（例如红色）并隐藏:(基本上从显示中删除）

GetDupeItems().hide();

Live test case

Answer 3

以下方法可以使用filter函数。

$('#find, #remove').click(function(e) {
  $('.uol > li').each(function() {
    var $this = $(this);
    var thisText = $this.html().toUpperCase();

    var count = $('.uol > li').filter(function() {
      return $(this).html().toUpperCase() == thisText;
    }).length;

    if (count > 1) {
      if (e.target == $('#find')[0]) {
        $this.addClass('duplicate');
      } else {
        $('.uol > li').removeClass('duplicate');
        $this.remove();   
      }     
    }

  });
});

所以基本上，遍历每个列表元素，然后使用filter函数来检索列表中有多少元素与当前文本具有相同文本的计数，如果该计数大于1，则给出元素类duplicate（注意：这不是优化的）。

Here's a fiddle

将过滤器添加到列表

3 个答案: