Javascript JQuery伪选择器：visible在一个位置工作，但在另一个位置不工作

我正在尝试选择页面上的输入字段，以验证哪些字段在布局上可见。我可以通过一种方式发现这一点，但用另一种方式它实际上不起作用。我得到的是我的选择器为直系子女工作，但不为孙子女工作

我只想选择那些在布局上实际可见的元素ID来验证它们，因为它们不应该为空

HTML

<div id="createdDiv1">
    <div id="row11">
        <div class="hide">
            <input type="text" class="blk" id="inp_11"/>
        </div>
    </div>
    <div id="row12">
        <div>
            <input type="text" class="blk" id="inp_12" />
        </div>
    </div>
</div>
<div id="createdDiv2">
    <div id="row21" class="hide">
        <div>
            <input type="text" class="blk" id="inp_21" />
        </div>
    </div>
    <div id="row22" class="">
        <div>
            <input type="text" class="blk" id="inp_22" />
        </div>
    </div>
</div>
<button onclick="subCheck('#createdDiv1 :visible')">check 1st</button>
<button onclick="subCheck('#createdDiv2 :visible')">check 2nd</button>

CSS

.hide{
    display:none;
}

注意：我不想更改我的

subCheck（）

函数，因为它对所有有效性都是通用的，我需要知道如何使用

：visible

选择器或类似的东西来使用可见元素的多级检查

如果我对你说得模棱两可，我很抱歉。我不知道该用什么词来解释。

用于排除类

。隐藏
：

<button onclick="subCheck('#createdDiv1 .inputDiv:not(\'.hide\')')">
    check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:not(\'.hide\')')">
    check 2nd
</button>

小提琴：
最后，如果您希望实现您的
：visible
，那么：

<button onclick="subCheck('#createdDiv1 .inputDiv:visible')">
    check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:visible')">
    check 2nd
</button>


第一次检查
第二次检查

小提琴：
也就足够了。
问题是，您要使用每个元素扫描一个可视顶部元素的所有内部
.blk
元素，在这种情况下，元素本身是可见的，但对中间的父元素是隐藏的

我知道您不会更改
子检查
函数，但您可以通过检查子元素
.blk
的可见性来解决问题

注意元素的有效可见性（直接或嵌套）：

如果元素占用文档中的空间，则认为它们是可见的。
可见元素的宽度或高度大于零

可见性为“隐藏”或不透明度为“0”的图元视为可见，
因为它们仍然会占用布局中的空间

不在文档中的元素被认为是隐藏的；
jQuery没有办法知道它们在运行时是否可见
附加到文档中，因为它取决于适用的样式

我认为这个更改不会破坏代码中的任何内容

代码：

演示：
您认为示例中的警报显示了什么？我的警报显示选定的元素，我只希望布局中可见的元素进入警报@Irvindiminak您是否尝试过使用.is（）@DeepakGoswami道歉，修正=），除非我误解了你的问题<代码>隐藏
只是一个例子，它可以是任何类或css隐藏div。我只想选择可见元素。使用的其他类可能不存在。查看我的编辑到post@DeepakGoswami我懂了！好吧，我已经包括了最后一个例子；否则我道歉！谢谢你帮我度过难关，但我想我似乎什么也做不到。我的运气不好：（@DeepakGoswami好吧，我仍然不知道我们（我和另一个答案）做错了什么，我们遗漏了什么？所有的解决方案都排除了隐藏的输入！：oI已经提到，我不想更改我的
subCheck
函数，因为它在很多地方都使用过（但在代码的另一个位置，您必须只检查可见元素或隐藏元素？副作用仅限于此，这些代码$（inBlock+'.blk'）包含开始选择器的所有子元素（visibile或not）；通过在末尾添加：visibile，您将获得代码实际位于我的函数中的所有子可见元素：），这就是为什么我问我是否可以选择元素而不改变它，因为我有这个函数用于各种验证，我没有把所有代码放在这里，因为它与我的问题无关。我认为如果不改变它，你必须指定更具体的选择器作为参数（a:visible b:visibile c:visible），但这将是最糟糕的
<button class="subcheck" data-id="createdDiv1">check 1st</button>
<button class="subcheck" data-id="createdDiv2">check 2nd</button>

<script>
    $(document).on('click', '.subcheck' function() {
        //Creates string as: '#createdDiv1 .inputDiv:not('hide')
        var ft = "#" + $(this).data('id') + " .inputDiv:not('.hide')";
        subCheck( ft );
    });
</script>

<button onclick="subCheck('#createdDiv1 .inputDiv:visible')">
    check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:visible')">
    check 2nd
</button>

function subCheck(inBlock) {
    inBlock=(inBlock==undefined)?'':inBlock;
    var ids=[];

    $(inBlock+' .blk:visible').each(function(){
        ids.push($(this).attr('id'));
    });

    //console.log(ids);
    alert(ids);
}