1

可能的重复：
jquery 删除重复的 li

我有一个如下所示的列表：http: //jsfiddle.net/UwPTF/

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

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

我正在尝试使用过滤器功能。如果您能解释您的代码，我们将不胜感激。

4

3 回答 3

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');
    }
  });
});​

当您单击查找按钮时，过滤器将应用于<li>无序列表中带有 id 的每个项目list。然后它获取所有其他<li>项目的，将它们的文本一起添加到一个字符串中并将其大写。然后它检查当前<li>项目是否包含在该字符串中。如果它在那里，它会返回 true 以便将类selecteditems添加到其中。

当您单击删除按钮时，它会删除除第一<li>项之外的所有内容selecteditems，并从第一项中删除该类<li>。

在这里查看。

如果您想绝对确定您正在检查单个项目而不是检查所有项目的字符串，您可以将查找代码更改为：

$('#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');
});
于 2012-11-06T16:03:14.137 回答
0

好吧，您必须将每个项目与所有其他项目进行比较。为了有效地完成它，我将对所有列表项进行两个普通循环：在第一个循环中计算每个项目根据其文本出现的次数，然后在第二个循环中仅过滤计数大于 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();

现场测试用例。

于 2012-11-06T16:01:53.997 回答
0

以下将起作用，利用该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（注意：这是未优化）。

这是一个小提琴

于 2012-11-06T16:06:07.067 回答