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

Question

私は以下のコードを持っています。私はJqueryを使ってリストを構築しています。 Javascript/JQueryを使用してこれを行うにはどうすればよいですか？終了後の

Htmlの（生の）リストがすでに動的リストを作成していないHTML上に存在する場合は、上記のコードはのみ動作します。この

<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><!--will be removed and put under CommonLister--> 
      <li class="columnItem">James</li> 
      <li class="columnItem">Mary</li><!--will be removed and put under CommonLister--> 
      </ul> 

      <ul id="listTwo"> 
      <li class="columnItem">John</li><!--will be removed and put under CommonLister--> 
      <li class="columnItem">Mark</li> 
      <li class="columnItem">Mary</li><!--will be removed and put under CommonLister--> 
      </ul> 
      <ul id="CommonLister"> 
      <li class="columnItem">John</li> 
      <li class="columnItem">Mark</li> 
      </ul> 
     </div> 

のjQuery/JavaScrpit

function myFunctioner(){ 
       $(() => { 
        let names = []; 
        let nameSet = new Set(); 

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

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

のようになります。私はAjaxのクエリでリストを構築します。上記のコードを動的に実装する方法をあなたに教えてもらえるかどうか、本当に感謝します。

Answer 1

これは私が持っているものです。あなたのプロジェクトに一貫性を持たせたいと思ったら、私がESに書いたものを書き換えることができると確信していますが、私は新しいJavascript表記を使用しません。

私は非常に似たアプローチをとっていましたが、私は動的に要素を作成しませんでした。とにかくこの要素がページに存在することがわかっている場合、私の個人的な哲学はそこに存在させて空にして、あなた自身で作成する必要はありません。

これらのリストが動的にロードされている場合（codepenの使用中に実際にテストできなかったもの）、リスト要素が作成された後に呼び出される関数にこれを入れます。 は、それがロードされたときに好ましくは、単にデータを通過するだろうと一度だけ適用されるDOMの変更を行い、時には我々は何をすべきか、私たちする必要があり

$(function() { 
 
    $('#run-code').on('click', function(e) { 
 
    e.preventDefault(); 
 
    //What were you doing? nope. 
 
    var currentItems = {}; //Blank object 
 
    var $mergeColumn = $('#CommonLister'); //Common list reference 
 
    $('.columnItem').each(function(i, el) { 
 
     var $el = $(el); //Notation I use to differentiate between the regular HTML Element and jQuery element 
 
     if (!currentItems.hasOwnProperty($el.html())) { 
 
     //Has this name come up before? if not, create it. 
 
     currentItems[$el.html()] = []; //Make it equal to a brand spanking new array 
 
     } 
 
     currentItems[$el.html()].push(el); 
 
     //Add the item to the array 
 
    }); 
 

 
    $.each(currentItems, function(name, data) { 
 
     //Loop through each name. We don't actually use the name variable because we don't care what someone's name is 
 
     if (data.length > 1) { 
 
     //Do we have more than 1 element in our array? time to move some stuff 
 
     $.each(data, function(i, el) { 
 
      var $el = $(el); //See note above 
 
      if (i == 0) { 
 
      //If this is the first element, let's just go ahead and move it to the merge column ul 
 
      $el.appendTo($mergeColumn); 
 
      } else { 
 
      $el.remove(); //Otherwise, we've already got this element so delete this one. 
 
      } //end if/else 
 
     }); //end $.each(data) 
 
     } //end if data.length >1 
 
    }); //end $.each(currentItems) 
 

 
    }); //end $.on() 
 
}); //end $()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="run-code" class="btn btn-success">Click Me</button> 
 

 
<h4>List 1</h4> 
 
<ul id="listOne"> 
 
    <li class="columnItem">John</li> 
 
    <!--will be removed and put under CommonLister--> 
 
    <li class="columnItem">James</li> 
 
    <li class="columnItem">Mary</li> 
 
    <!--will be removed and put under CommonLister--> 
 
</ul> 
 
<h4>List 2</h4> 
 
<ul id="listTwo"> 
 
    <li class="columnItem">John</li> 
 
    <!--will be removed and put under CommonLister--> 
 
    <li class="columnItem">Mark</li> 
 
    <li class="columnItem">Mary</li> 
 
    <!--will be removed and put under CommonLister--> 
 
</ul> 
 
<h4>Common List</h4> 
 
<ul id="CommonLister"> 
 
</ul>