jQuery: Phát hiện nếu phần tử tồn tại

Question

Trong mã của tôi, tôi có html sau được thêm vào Mục danh sách khi người dùng nhấp vào một phần tử cụ thể.

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

Sử dụng jQuery, làm cách nào để phát hiện nếu phần tử tồn tại và nếu có, không thêm dấu kiểm màu xanh lục khác?

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

Answer 1

Sử dụng not và has

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

Answer 2

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

Được rồi, sau một vài chỉnh sửa, điều này sẽ là những gì bạn đang tìm kiếm.

$("#listItem span.greenCheckMark").length != 0 sẽ trả về một mảng đối tượng JQuery, nếu khu vực đó có độ dài không bằng 0 thì nó tồn tại. Hãy chắc chắn rằng bạn đang kiểm tra cụ thể cho nơi bạn muốn kiểm tra, ($("span.greenCheckMark").length sẽ kiểm tra toàn bộ tài liệu cho các dấu kiểm màu xanh lục).

Answer 3

Bạn chỉ có thể tìm kiếm nó?

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

EDIT: Fixed 'un-gì liên quan' đặt câu hỏi.

Answer 4

Theo yêu cầu của bạn, điều này sẽ chỉ gắn <span> trong trường hợp đó #listItem không chứa một <span> với một class của greenCheckMark.

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