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>');
});
$('#listItem:not(:has(.greenCheckMark))')
.append('<span class="greenCheckMark"></span>');
You could just look for it?
($('.greenCheckMark', '#listItem').length > 0) ? /* found green check mark in #listItem */ : /* not found */ ;
EDIT: Fixed 'un-relatedness' to question.
if statement would be better suited?if statement would be better suited`. This is just an explanation to a question -- it's not going to be inserted verbatim into some code base.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>');
}
.has() will always return an object. I get confused on this one because the method name sounds like it should return boolean.length.$('.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).
this? - shouldn't it be $('#listItem').find(...?