選擇表單中的所有元素，除父div包含display：none

Question

我正在嘗試選擇表單中的元素，除了父div包含display：none

$('*[data-val-required="required"]') 

在這里我可以選擇所有元素以及父div中的隱藏元素

<div class="form-group" style=" display: none; " >
<div  class="col-sm-3 control-label">
    lable
</div>
<div class="col-sm-6">
<select class="form-control"  data-val-required="This field is required" >
</div>
<div class="col-sm-3"></div>

如何排除這些元素

Answer 1

您可以定位.form-group並使用:visible偽選擇器：

$('.form-group:visible *[data-val-required="required"]') 

Answer 2

可以使用:hidden選擇器結合not()來排除它們

$('*[data-val-required="required"]').not(':hidden') 

當父母被隱藏時，它的后代也是如此

參考：隱藏選擇器

Answer 3

最簡單的方法是使用父類中的類，如下所示：

$('.form-group:visible *[data-val-required="required"]')

但是要清醒:visible偽選擇器為visibility:hidden返回true visibility:hidden和opacity:0

https://api.jquery.com/visible-selector/

Answer 4

如果您只有特定元素，則不想選擇。 然后使用jQuery中的not（）選擇器。

FX。 $（ '* [數據-VAL-需要= “必需的”]'）。不（ '控制標簽'）

見文檔： http ： //api.jquery.com/not/