使用 ':hidden' 选择器在 jquery 中查找隐藏元素答案

【问题标题】：Using ':hidden' selector to find hidden elements in jquery使用 ':hidden' 选择器在 jquery 中查找隐藏元素
【发布时间】：2015-05-29 06:30:25
【问题描述】：

在 jQuery 中，我可以使用 $(':hidden') 来查找隐藏元素，但我不想包含 0 大小的元素 (width=0 and height=0)。

如何做到这一点？

我不能只判断它是否为0 size，因为如果它的父母之一是隐藏的，我也想选择它。

例如：

<img id="e1" width="0" height="0" />
<div style="display:none;">
    <img id="e2" width="0" height="0" />
</div>

<script>
    // I want to select "e2",but not "e1"
    var myelems = $('img:hidden');
</script>

我想选择“e2”，而不是“e1”。

【问题讨论】：

所以您只想包含display: hidden elemnets？
@ArunPJohny visibility: hidden 也许！ :)

标签： javascript jquery hidden

【解决方案1】：

这样的？

if (element.is(':hidden') && element.width() != 0 && element.height != 0) {
   //do some stuff
}

【讨论】：

谢谢，但如果它的父母之一被隐藏，我希望选择它。

【解决方案2】：

在 jquery 中使用 filter

$(':hidden').filter(function(){
      return $(this).width()!=0 && $(this).height()!=0;
});

【讨论】：

【解决方案3】：

您可以尝试使用 jQuery 的not 方法或not 选择器来解决您的问题。例如，

$(document).ready(function() {
  console.log($(":hidden").not($("input[width=0],input[height=0]")));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Check the output in console</h1>
<input type="hidden" name="a1" id="a1" value="a1">
<input type="hidden" name="a2" id="a2" value="a2">
<input type="hidden" name="b1" id="b1" width=0 height=0 value="a3">

试试看！！

【讨论】：

大声笑！那只是一个例子！隐藏的输入元素也没有width和height！！！

【解决方案4】：

如果你将 style 属性设置为display: none;（或者使用 jQuery 的 .hide()）你可以使用这个

(Demo)

$('*[style*="display: none;"]');

【讨论】：

【解决方案5】：

jQuery('elem:hidden').each(function(ind){
if(jQuery(this).height() > 0 && jQuery(this).width() > 0){
console.log(jQuery(this))
}
});

【讨论】：