Kiểm tra khả năng hiển thị của một phần tử

Question

Tôi muốn kiểm tra xem một phần tử có hiển thị hay không và nếu có, tôi muốn cuộn xuống phần tử đó. Tôi đang cố gắng đạt được điều đó với jquery sau:

var j = jQuery.noConflict(); 

    jQuery(document).ready(function($) { 
    if(j('#element').css('display') == 'block'){ 
     j('body').scrollTo('#target'); 
     }; 
}); 

nhưng nó không hoạt động.

Answer 1

// jQuery no conflict mode 
var j = $.noConflict(); 

// retain meaning of jQuery's handle (optional but makes it 
// sometimes easier if you don't use one-letter assignments 
// of jQuery) 
(function($){ 

    // document read 
    $(function(){ 
    // if element is visible (a visible #element was found) 
    if $('#element:visible').size() > 0){ 
     // scroll to #target 
     $('body').scrollTo('#target'); 
    } 
    }); 

})(j); 

:visible làm cho nó dễ dàng hơn. Bạn không thể chỉ kiểm tra theo số display=='block', bạn cũng sẽ phải thử nghiệm cho inline-block và các thiết bị khác ngoài việc kiểm tra cài đặt visibility. Ví dụ: phần tử có thể có display:block:visibility:hidden không làm cho nó :visible.

Answer 2

Sử dụng .is() và :visible

var j = jQuery.noConflict(); 

jQuery(function($) { 
    if($('#element').is(':visible')){ 
     $('body').scrollTo('#target'); 
    }; 
}); 

Answer 3

Hãy thử:

if($(element).is(":visible")) 

Tham khảo bài này: How do I check if an element is hidden in jQuery?