Question

在我的代码中，当用户点击特定元素时，我将以下html附加到List Item。

<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和has

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

$('.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将检查整个文档的绿色复选标记。）

Answer 4

根据您的要求，只有在<span>尚未包含#listItem <span> class greenCheckMark的情况下，才会附加var listItem = $('#listItem'); if ( !listItem.find('span.greenCheckMark')[0] ) { listItem.append('<span class="greenCheckMark"></span>'); }

{{1}}

jQuery：检测元素是否存在

4 个答案: