如何檢查是否元素列表

Question

已經存在，我有以下JS文件：

;(function ($) {  
    $('.filter-opts .opt').click(function(){ 
     var selectedName = $(this).html(); 
     $('.append').append('<li>' + selectedName + '</li>'); 
    }); 

    $(document).on('click', '.append li', function(){ 
     $(this).remove(); 
    }); 
})(jQuery); 

Codepen：http://codepen.io/brunomonteiro3/pen/vGdJVR

正如你所看到的，一個<li>選項被點擊時，它克隆元素到另一個列表。但是我想確定一個項目是否已經列出，它不會再被列出。

什麼是驗證它的最佳選擇？

Answer 1

使用filter函數檢查項目是否已經存在。

exist = $('.append li').filter(function() { 
    return $(this).text() == selectedName 
}); 
if (!exist.length) 
    $('.append').append('<li>' + selectedName + '</li>'); 

DEMO

Answer 2

你應該一類或其他身份屬性添加到每個不同的項目，並進行搜索：

$(function(){ 
 
    var $target = $(".append").first(); 
 
    $('.filter-opts .opt').click(function(){ 
 
     var name = $(this).attr("data-name"); 
 
     if ($target.find('[data-name="' + name + '"]').size() == 0) { 
 
      $(this).clone().appendTo($target); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="filter-opts"> 
 
    <li class="opt" data-name="o1">Option 1</li> 
 
    <li class="opt" data-name="o2">Option 2</li> 
 
    <li class="opt" data-name="o3">Option 3</li> 
 
    <li class="opt" data-name="o4">Option 4</li> 
 
</ul> 
 

 
<h2>Appended:</h2> 
 

 
<ul class="append"> 
 
</ul>

---

如果你不能改變你的HTML，你可以跟蹤已添加的項目，例如：

$(function(){ 
 
    var $target = $(".append").first(); 
 
    $('.filter-opts .opt').click(function(){ 
 
     if (!$(this).prop("alreadyAdded")) { 
 
      $(this).clone().appendTo($target); 
 
      $(this).prop("alreadyAdded", true); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="filter-opts"> 
 
    <li class="opt">Option 1</li> 
 
    <li class="opt">Option 2</li> 
 
    <li class="opt">Option 3</li> 
 
    <li class="opt">Option 4</li> 
 
</ul> 
 

 
<h2>Appended:</h2> 
 

 
<ul class="append"> 
 
</ul>

Answer 3

這裏是一個解決方案：

(function($) { 
    var $secondList = $('.append'); 
    $('.filter-opts .opt').click(function() { 
    var selectedName = $(this).text(); 
    if (!$secondList.find('li:contains("' + selectedName + '")').length) { 
     $secondList.append('<li>' + selectedName + '</li>'); 
    } 
    }); 

    $(document).on('click', '.append li', function() { 
    $(this).remove(); 
    }); 
})(jQuery); 

Codepen demo