Question

以下两行显示在页面的不同位置：

Line 1: <span class="specLink"><a title="Part A" href="/page1.aspx">Part A</a></span>
Line 2: <span class="specLink"><a title="Part A" href="/page1.aspx">Part A</a></span>

我目前正在做的是为每个specLink类锚定并将其添加到另一个DIV：

<div class="addSpecialties">
    //add those links in this DIV
</div>

因此，我现在使用的Javascript出来了：

<div class="addSpecialties">
    <a title="Part A" href="/page1.aspx">Part A</a>
    <a title="Part A" href="/page1.aspx">Part A</a>
</div>

但是，我想要显示的是（只是其中一个，因为它们是重复的）：

<div class="addSpecialties">
    <a title="Part A" href="/page1.aspx">Part A</a>
</div>

如何修改我的代码，只需要出现一次.specLink a。

Answer 1

问题Remove Duplicates from JavaScript Array包含从数组中删除重复项的完整列表。例如，一种简单但天真的方式是

function removeDuplicateElements(array) {
  return array.filter(function (item, index) {
    return array.indexOf(item) === index;
  });
}

然而，对您来说无效。该功能不会删除任何元素。

那是因为对象是通过引用进行比较的，即使你的元素看起来是一样的，它们实际上也是不同的实体。所以上面的代码不会检测到任何重复。

你想要的是对象之间的某种“松散”平等。 That is not simple in general

但由于你只是dealing with nodes，所以有一个完美的解决方案：isEqualNode

function removeDuplicateNodes(array) {
  return array.filter(function (item, index) {
    for(var i=0; i<index; ++i)
      if(item.isEqualNode(array[i]))
        return false;
    return true;
  });
}

看到区别：

var el1 = document.createElement('div'),
    el2 = el1.cloneNode(true);
removeDuplicateElements([el1, el2]); // [el1, el2], because el1 !== el2
removeDuplicateNodes([el1, el2]); // [el1], because el1.isEqualNode(el2)

Answer 2

如果您熟悉lodash，uniq功能听起来就像您要找的那样。

_.uniq([2, 1, 2]);
// → [2, 1]

// isSorted = true
_.uniq([1, 1, 2], true);
// → [1, 2]

https://lodash.com/docs#uniq

Answer 3

你必须回归＆＃39; true＆＃39;保持一个元素，并且“假”＆＃39;删除元素。你的删除重复元素＆＃39;函数返回false，因此在执行时，它会删除数组中的每个元素。正如@gnerkus建议的那样，修改removeDuplicateElements（）函数以返回以下内容：

return array.indexOf(item) === index;

Answer 4

这是一个从div中删除重复a元素的函数

function removeDuplicateLinks() {
    var div                 = document.getElementsByClassName('addSpecialties')[0];
    var specialities        =  div.children;
    var uniqueSpecialities  = [];

    for (var i = 0; i < specialities.length; i++) {
        var elem = specialities[i];

        if (elem.nodeName === 'A') {
            var title = specialities[i].title;

            if (uniqueSpecialities.indexOf(title) === -1) {
                uniqueSpecialities.push(title);
            } else {
                div.removeChild(elem);
                i--;
            }
        }
    }
}

＆＃13;

function removeDuplicateLinks() {
  var div = document.getElementsByClassName('addSpecialties')[0];
  var specialities = div.children;
  var uniqueSpecialities = [];

  for (var i = 0; i < specialities.length; i++) {
    var elem = specialities[i];

    if (elem.nodeName === 'A') {
      var title = specialities[i].title;

      if (uniqueSpecialities.indexOf(title) === -1) {
        uniqueSpecialities.push(title);
      } else {
        div.removeChild(elem);
        i--;
      }
    }
  }
}

＆＃13;

.addSpecialties a { display: block; }

＆＃13;

<button onclick="removeDuplicateLinks()">Remove duplicate links</button>

<div class="addSpecialties">
  <a title="Part A" href="#">Part A</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part B" href="#">Part B</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part B" href="#">Part B</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part B" href="#">Part B</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part C" href="#">Part C</a>
  <a title="Part C" href="#">Part C</a>
</div>

＆＃13;

Answer 5

您需要返回过滤器的结果：

function removeDuplicateElements(array) {
        return array.filter(function (item, index) {
            return array.indexOf(item) === index;
        });
    }

如何从javascript数组中删除重复项

5 个答案: