正确使用.is(':visible')

Question

我有这个密码

<div style="height:500px;display:none"></div>
<div style="height:1000px;"></div>

<script>

$(document).ready(function() {

     var visible_elem_height = $('div').is(':visible').height()

     alert( visible_elem_height )

});

</script>

但是我的代码不起作用，所以你有什么建议？

Answer 1

.is()返回一个布尔值，这样您的脚本就会失败，而您需要

$(document).ready(function () {

    var visible_elem_height = $('div:visible').height();
    //or var visible_elem_height = $('div').filter(':visible').height()

    alert(visible_elem_height)

})

Answer 2

$('div').is(':visible')根据元素的可见性返回true/false。另一方面，.height()函数应用于元素，而不是应用于boolean输出。因此，$('div').is(':visible').height()根本无法工作。

若要实现所需的行为，请使用:visible选择器$('div:visible').height()

$(document).ready(function() {

     var visible_elem_height = $('div:visible').height()

     alert( visible_elem_height )

});

普鲁克尔

Answer 3

试着利用.filter()

​

$(document).ready(function() {
  var div = $("div").filter(function(i, el) {
    return $(el).is(":visible")
  });
  
  if (div.length > 0) {
    alert(div.height())
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:500px;display:none"></div>
<div style="height:1000px;"></div>

​