jquery yếu tố tìm với lớp và phong cách display: block

Question

Tôi lấy số lượng "tìm thấy" yếu tố (các yếu tố này có lớp .highlight) với đoạn này jQuery đơn giản:

$(".highlight").length 

Nhưng bây giờ vấn đề của tôi là một số yếu tố bị ẩn, thông qua style="display: none;"

Bây giờ, Làm cách nào để tôi nhận được số phần tử được tô sáng VÀ hiển thị?

Cái gì như:

$(hasClass 'highlight' AND has style 'display: block'). length ? 

Answer 1

Bạn có thể sử dụng :visible để có được yếu tố đó có thể nhìn thấy.

$(".highlight:visible").length 

Answer 2

U cũng có thể làm bằng cách sử dụng css để xem các phần tử có css display="none" hoặc display="block"

$(".highlight").each(function(){ 
     if($(this).css("display")=="block"){ 
      //Your code here 
     } 
    }); 

Answer 3

Một cách là sử dụng :visible jQuery pseudo selector như Adil đề cập.

Một cạm bẫy phổ biến là nếu phần tử có lớp .highlight được lồng vào một container được ẩn sau đó bạn sẽ không có khả năng để có được nó mặc dù yếu tố đó có display: block

Thay vào đó bạn có thể sử dụng css regex như sau: $('.highlight[style*="display: block"]')

Một điều đáng tiếc là bạn cần biết chính xác quy tắc được viết như thế nào. Nếu không có khoảng trắng trước block như vậy: display:block thay vì display: block bạn cũng sẽ không thể lấy yếu tố đó.

Một cách để khắc phục điều này là để chỉ tìm kiếm các thuật ngữ block trong phong cách như vậy: $('.highlight[style*="block"]')