如何检查元素是否已存在于列表中

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>');

演示

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