javascript - 在两个列表之间移动项目但过滤已存在的项目

Question

我有一个包含两个列表(无序列表)的网页，我必须将项目从列表 1 移动到列表 2，但要过滤掉列表 2 中已有的项目。我使用 JQuery 作为 js 库。我知道我可以选择所有要移动到列表 2 的项目，逐一循环并检查列表 2 中是否已经存在，但我正在徘徊是否有一种方法可以使用过滤器以更少的代码行来完成此操作，:not,:有 ...这是一个 html 结构:

  <ul id="ulList_1">
     <li>
        <a href="#">item 1</a>
     </li>
     <li>
        <a href="#">item 2</a>
     </li>
  </ul>

  <ul id="ulList_2">
     <li>
        <a href="#">item 2</a>
     </li>
     <li>
        <a href="#">item 3</a>
     </li>
     <li>
        <a href="#">item 4</a>
     </li>      
 </ul>

因此，在这种情况下，我只想选择“项目 1”，因为“项目 2”已存在于“ulList_2”中，并将其附加到列表 2谢谢

Answer 1

我将首先使用 $.map 将列表 2 的元素的内部文本提取到数组中，然后 filter 列表 1，使用 $.inArray 仅选择 列表 2 中不存在的元素:

var list2Items = $('#ulList_2 li > a').map(function(){return $(this).text();}); 
// list2Items will be: ["item 2", "item 3", "item 4"] 

var itemsNotInList2 = $('#ulList_1 li > a').filter(function(){
  return $.inArray($(this).text(), list2Items) == -1; // Select only non-existing
});                                                   // items.