共通要素の下に重複を入れよう

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

Jquery Each functionこの問題でお手伝いをします。以下に示すように、forループを使ってすべてのリストアイテムをトラバースすることができます。

これは（N^2）、あなたはリスト要素を比較するために、より効果的なアルゴリズムを使用することができますOでの作業の基本的なソリューションです。

$("#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 2

$("#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>

Answer 3

あなたは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>