JQuery伪选择器:可见在一个地方但不在其他地方

时间:2014-04-11 12:40:04

标签: javascript jquery html css jquery-selectors

我正在尝试选择页面上的那些输入字段来验证哪些在布局上可见。我能够通过一种方式找到这一点,但另一种方式却没有实际发挥作用。我得到的是我的选择器正在为直接的孩子工作,但不适合大孩子。

我想只选择那些在布局上实际可见的元素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一起使用选择器或类似的东西,用于对可见元素进行多级检查。

抱歉,如果我对你不明白。我不确定用文字解释究竟是什么。

2 个答案:

答案 0 :(得分:0)

使用: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/

也足够了。

答案 1 :(得分:0)

问题是你使用每个元素扫描一个可见的top元素的所有内部.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/