Wie kann man überprüfen, ob Element existiert bereits auf Liste

Question

Ich habe folgende JS-Datei:

;(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

Wie Sie sehen können, wenn eine <li> Option geklickt wird, es klonen die Element zu einer anderen Liste. Aber ich möchte sicherstellen, dass ein Artikel bereits aufgeführt ist und nicht erneut aufgeführt wird.

Was wäre die beste Option, um es zu überprüfen?

Answer 1

Überprüfen Sie, ob der Artikel bereits vorhanden ist, indem Sie filter funcition verwenden.

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

DEMO

Answer 2

Sie sollten eine Klasse oder ein anderes Identitätsattribut zu jedem unterschiedlichen Element hinzufügen, und suchen Sie sie:

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

---

Wenn Sie Ihre HTML ändern können, können Sie verfolgen, bereits hinzugefügte Elemente, zum Beispiel:

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

Hier ist eine Lösung:

(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