我正在尝试选择页面上的那些输入字段来验证哪些在布局上可见。我能够通过一种方式找到这一点,但另一种方式却没有实际发挥作用。我得到的是我的选择器正在为直接的孩子工作,但不适合大孩子。
我想只选择那些在布局上实际可见的元素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>
的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
一起使用选择器或类似的东西,用于对可见元素进行多级检查。
抱歉,如果我对你不明白。我不确定用文字解释究竟是什么。
答案 0 :(得分:0)
使用:not
排除班级.hide
:
<button onclick="subCheck('#createdDiv1 .inputDiv:not(\'.hide\')')">
check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:not(\'.hide\')')">
check 2nd
</button>
虽然我根本不建议使用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>
最后,如果您希望实施:visible
,那么:
<button onclick="subCheck('#createdDiv1 .inputDiv:visible')">
check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:visible')">
check 2nd
</button>
也足够了。
答案 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);
}