jQuery: Detect if element exists

Question

In my code I have the following html that gets appended to a List Item when the user clicks on a specific element.

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

Using jQuery, how would I detect if the element existed, and if so, not add another green checkmark?

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

Answer 1

$('.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>');
    } 
}); 

Okay, after a few edits, this should be what you're looking for.

$("#listItem span.greenCheckMark").length != 0 will return an array of JQuery objects, if that area has a length not equal to 0 then it exists. Make sure that you are checking specifically for where you want to check, ($("span.greenCheckMark").length will check the entire document for green check marks).

Answer 2

Use not and has

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

Answer 3

You could just look for it?

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

EDIT: Fixed 'un-relatedness' to question.

Answer 4

As per your requirements, this will only append the <span> in the case that #listItem does not already contain a <span> with a class of greenCheckMark.

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