Kiểm tra xem div không có phần tử

Question

Tôi đang cố gắng thực hiện điều gì đó nếu div chứa một phần tử nhất định, nhưng dường như không thể kích hoạt điều kiện. Đây là ảnh đẹp nhất của tôi.

<div class='test'> 
    testing123 
</div> 

<div class='test'> 
    <p>testing456</p> 
</div> 

$('.test').each(function(){ 
    if(!$(this).has('p')) { 
     $(this).addClass('red'); 
    } 
}); 

tập lệnh chỉ nhắm mục tiêu hoàn toàn mọi thứ. Đây là một fiddle sống - http://jsbin.com/igoyuk/edit#javascript,html,live

Answer 1

Lưu ý rằng .has()trả về jQuery, không phải là boolean!

.has (selector) Returns: jQuery
Mô tả: Giảm tập các phần tử phù hợp với những người có một hậu duệ phù hợp với selector hoặc phần tử DOM.

Làm if(!$(this).has('p')) luôn đúng, vì jQuery luôn trả về bộ, ngay cả khi nó trống!

.has() về cơ bản các bộ lọc tập nó được kêu gọi, vì vậy bạn chỉ phải làm:

$('.test').has('p').addClass('red'); 

Answer 2

if (!($(this).find('p').length > 0)) { 
    $(this).addClass('red'); 
} 

Answer 3

Bạn có thể sử dụng các điều kiện sau đây để kiểm tra sự vắng mặt của một loại nguyên tố:

if($('p', $(this)).length == 0) 

Kể từ $('p', $(this)) sẽ trở lại tất cả các p yếu tố bên trong hiện tại thành phần.

Answer 4

Xem xét sử dụng như sau: chỉ

$("div.test:has(p)").addClass("red"); 

này truy vấn DOM của bạn cho <div> yếu tố, lựa chọn những người có bài kiểm tra và sau đó xem để xem liệu nó có phần tử <p/> hay không. Một chút terse = ít byte hơn dây.