javascript - 将重复项放在公共(public)元素下

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 6 年前。

Improve this question

我有以下代码。

<ul id="listOne">
    <li class="columnItem>John</li>
    <li class="columnItem>James</li>
    <li class="columnItem>Mary</li>
</ul>

<ul id="listTwo">
    <li class="columnItem>John</li>
    <li class="columnItem>Mark</li>
    <li class="columnItem>Mary</li>
</ul>

我想从两个列表中删除重复的列表项，并将其放置在另一个列表下作为“CommonList”。类似的东西

<ul id="CommmonList">
    <li class="columnItem>John</li>
    <li class="columnItem>Mary</li>
</ul>
<ul id="listOne">
    <li class="columnItem>James</li>        
</ul>

<ul id="listTwo">
    <li class="columnItem>Mark</li>
</ul>

Answer 1

您可以使用ES6 Sets来做到这一点.

这是你可以做的。

$(() => {

  let names = [];
  let nameSet = new Set();

  $("li.columnItem").each((idx, ele) => {
    nameSet.add($(ele).html())
  });

  var $common = $("<ul>").addClass("commmonList");
  nameSet.forEach((name) => {
    if ($("li:contains(" + name + ")").length > 1) {
      $("li:contains(" + name + ")").remove();
      $("<li>").addClass("columnItem").html(name).appendTo($common);
    }
  });
  $common.appendTo($("div"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul id="listOne">
    <li class="columnItem">John</li>
    <li class="columnItem">James</li>
    <li class="columnItem">Mary</li>
  </ul>

  <ul id="listTwo">
    <li class="columnItem">John</li>
    <li class="columnItem">Mark</li>
    <li class="columnItem">Mary</li>
  </ul>
</div>