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执行此操作。

这是你能做的。

＆＃13;

$(() => {

  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"));
});

＆＃13;

<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>

＆＃13;

Answer 2

Jquery Each function会帮助您解决此问题。您可以使用for循环遍历所有列表项，如下所示。

这是在O（n ^ 2）中工作的基本解决方案，您可以使用更有效的算法来比较列表元素。

$("#duplicate").on('click',function(){
    var CommmonListHtml = "<ul id='CommmonList'>";

    $( "#listOne li" ).each(function( index_one ) {
        thiz = $(this);
        $( "#listTwo li" ).each(function( index ) {
            if(thiz.text() == $(this).text()){
                CommmonListHtml += "<li>"+$(this).text()+"</li>";
                thiz.remove();
                $(this).remove();
            }
        });
    });

    CommmonListHtml += "</ul>";

    $("div.lists").prepend(CommmonListHtml);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='lists'>
    <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>
    <a href='#' id='duplicate'>Remove Duplicates</a>
</div>

Answer 3

$("#listOne li").each(function(a,c){
$("#listTwo li").each(function(b,d){
if($(c).html()==$(d).html()){
  var re=$(c).remove()[0];
   $(d).remove();
  $("#CommmonList").append(re);
}
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<ul id="CommmonList">
    
</ul>

将重复项放在Common Element下

3 个答案: