JQuery 伪选择器：可见在一个地方工作，但在其他地方不工作

Question

我正在尝试选择页面上的那些输入字段以验证哪些在布局上可见。我可以通过一种方式找到它，但用另一种方式它实际上并没有工作。我得到的是我的选择器适用于直系子女，但不适用于孙子女。

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

Jsfiddle Demo

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>

JavaScript

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

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

    console.log(ids);
}

CSS

.hide{
    display:none;
}

注意：我不想更改我的 subCheck() 函数，因为它适用于所有验证，我需要知道如何使它与 :visible 选择器或类似的东西一起使用让它与可见元素的多级检查一起工作。

对不起，如果我让你模棱两可。我不知道具体用什么语言来解释。

Answer 1

使用:not 排除类.hide：

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

小提琴：http://jsfiddle.net/Z4PSV/1/

虽然我根本不建议使用onclick，但是：

<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>

小提琴：http://jsfiddle.net/kY8Wh/

最后，如果您希望实现 :visible，那么：

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

小提琴：http://jsfiddle.net/Zgm78/

也够了。

Answer 2

问题是您使用 each 扫描可见顶部元素的所有内部 .blk 元素，在这种情况下，元素本身是可见的，但对中间父元素隐藏。

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

Visibile selector 负责元素的有效可见性（直接或嵌套）：

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

具有可见性的元素：隐藏或不透明度：0 被认为是可见的， 因为它们仍然会占用布局中的空间。

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

我认为此更改不会破坏您代码中的任何内容。

代码：

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

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

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

演示：http://jsfiddle.net/IrvinDominin/her4Y/