[英]How to check if element already exists on list
我有以下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>
選項時,會將元素克隆到另一個列表。 但是,我想確保如果某項已被列出,它將不會再次列出。
驗證的最佳選擇是什么?
使用filter
檢查該項目是否已經存在。
exist = $('.append li').filter(function() {
return $(this).text() == selectedName
});
if (!exist.length)
$('.append').append('<li>' + selectedName + '</li>');
您應該為每個不同的項目添加一個類或其他標識屬性,並進行搜索:
$(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>
這是一種解決方案:
(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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.