jQuery：检测元素是否存在

Question

在我的代码中，当用户单击特定元素时，我将以下 html 附加到列表项。

<span class="greenCheckMark"></span>

使用 jQuery，我如何检测该元素是否存在，如果存在，则不添加另一个绿色复选标记？

$('.clickedElement').live('click',function(){
//does the green check mark exist? if so then do nothing, else 
$('#listItem).append('<span class="greenCheckMark"></span>');
});

Answer 1

使用 not 和 有

$('#listItem:not(:has(.greenCheckMark))')
    .append('<span class="greenCheckMark"></span>');

Answer 2

你可以随便找找吗？

($('.greenCheckMark', '#listItem').length > 0) ? /* found green check mark in #listItem */ : /* not found */ ;

编辑：修复了问题的“不相关性”。

Answer 3

根据您的要求，这只会在 #listItem 尚未包含 的情况下附加 具有 greenCheckMark 的 class。

var listItem = $('#listItem');
if ( !listItem.find('span.greenCheckMark')[0] ) {
    listItem.append('<span class="greenCheckMark"></span>');
}

Answer 4

$('.clickedElement').live('click',function(){ 
    //does the green check mark exist? if so then do nothing, else
    if($("#listItem span.greenCheckMark").length != 0)
    {
        $('#listItem').append('<span class="greenCheckMark"></span>');
    } 
}); 

好的，经过一些编辑后，这应该就是您要寻找的内容。

$("#listItem span.greenCheckMark").length != 0 将返回一个 JQuery 对象数组，如果该区域的长度不等于 0，则它存在。确保您专门检查要检查的位置（$("span.greenCheckMark").length 将检查整个文档中的绿色复选标记）。