如何过滤被其他元素隐藏的“可见” jQuery 元素？答案

【问题标题】：How to filter "visible" jQuery elements hidden by another elements?如何过滤被其他元素隐藏的“可见” jQuery 元素？
【发布时间】：2017-04-22 04:42:50
【问题描述】：

我有这个问题，我想使用

过滤选择的元素（例如表单的控件）

$controls = $(document).find('.control');
$controls.filter('[required]:visible');

这应该会返回表单的控件是可见且必需的。

问题是当我隐藏了一组元素，但这些元素是可见的，例如：

<div class="group" style="display:none">
    <div class="control" id="control1" required>
         <input type="text" />
    </div>
    <div class="control" id="control2" required>
         <input type="text" />
    </div>
...
    <div class="control" id="control3">
         <input type="text" />
    </div>
</div>

当我过滤控件时，我什么也得不到，因为“组”隐藏了所有内容。

我该如何解决？（我知道怎么做，但问题是关于'[required]:visible' 的简单性，我想要一个这样的答案，带有选择器）。

谢谢。

【问题讨论】：

这不是问题，当parent被隐藏时，孩子也被隐藏是正常的。如果您想选择所有控件（包括隐藏），您只需将选择器更改为 ('[required=required]')

标签： javascript jquery twitter-bootstrap select

【解决方案1】：

如果你能分享一个工作小提琴，甚至是一个 sn-p，我本可以更好地帮助你。不过我还是尽量回答你的问题。

首先，由于您的父母被隐藏，您的孩子也将被隐藏（正常行为）

其次，尝试这样做

var elem = $(element),
controlElem = elem.find(".control"),
if(controlElem.hasClass("required")){
success code goes here.

另外不要忘记将您的选择器更改为 ('[required=required]')

希望这会有所帮助。

【讨论】：

【解决方案2】：

您可以使用此 sn-p 进行操作：

$controls = $(document).find('.control');
console.log($controls.filter(function(){
	return $(this).css('display') == 'block' && $(this).attr('required') == 'required';
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group" style="display:none">
    <div class="control" id="control1" required>
         <input type="text" />
    </div>
    <div class="control" id="control2" required>
         <input type="text" />
    </div>
    <div class="control" id="control3">
         <input type="text" />
    </div>
</div>

【讨论】：

【解决方案3】：

为什么不隐藏元素，而不是隐藏组？，或者如果您对隐藏元素的值感兴趣，只需删除 :visible 过滤器。

【讨论】：