JQuery/Javascript选择不可见元素

-1

我有一个带有选项卡的页面，我想选择每个选项卡上的每个范围/输入，但不是隐藏的div中的那些。JQuery/Javascript选择不可见元素

隐藏标签和隐藏属性之间有区别吗？对于undertand这个问题，有我的代码：

HTML

<input type="button" value="click me" id="btn"> 
    <main> 
    <input id="tab1" class="tab" type="radio" name="tabs" checked> 
    <label for="tab1">Codepen</label> 

    <input id="tab2" class="tab" type="radio" name="tabs"> 
    <label for="tab2">Dribbble</label> 

    <input id="tab3" class="tab" type="radio" name="tabs"> 
    <label for="tab3">Dropbox</label> 


<section id="content1"> 
<span id="span1">span1</span> 
<input id="inp1" type="text" value="val" /> 
</section> 

<section id="content2"> 
<span id="span2">span2</span> 
<input id="inp2" type="text" value="val2" /> 
    <div hidden> 
    <span id="span3">span3</span> 
    <input id="inp3" type="text" value="val3" /> 
    </div> 
</section> 

<section id="content3"> 
<span id="span4">span4</span> 
<input id="inp4" type="text" value="val4" /> 
    <div> 
    <span id="span5">span5</span> 
    <input id="inp5" type="text" value="val5" /> 
    </div> 

    <div hidden> 
     <div> 
     <span id="span6">span6</span> 
     <input id="inp6" type="text" value="val6" /> 
     </div> 
    </div> 
</section> 
</main>

和我尝试jQuery的

$("#btn").click(function() { 

$.each($("section").find("span, input"), function() { 
    if ($(this).is(":visible")) { 
     console.log($(this).attr("id")); 
    } 

}) 
})

输出是：

span1 
inp1

如果我删除了，如果条件下，输出是：

span1 
inp1 
span2 
inp2 
span3 
inp3 
span4 
inp4 
span5 
inp5 
span6 
inp6

而我想到的是：

span1 
inp1 
span2 
inp2 
span4 
inp4 
inp5 
span5

而且还有我的JSFiddle for live demo

我不知道这是明确的，请求我评论更多的解释，并为我的英语感到抱歉。由于

来源

2016-06-10 Jax Teller

问题，有两种解决方案是用CSS，有'部分{显示：none}'这使得一切都隐藏起来，除了一节 –

有此

$("#btn").click(function() { 

console.log("Method 1"); 

$.each($("section").find("span, input"), function() { 
    if ($(this).closest("[hidden]").length == 0) 
    { 
    console.log($(this).attr("id")); 
    } 

}) 

console.log("Method 2"); 

$.each($("section > span, section > input, section > div:not([hidden]) span, section > div:not([hidden]) input"), function() { 
    if ($(this).closest("[hidden]").length == 0) 
    { 
    console.log($(this).attr("id")); 
    } 

}) 
})

来源

2016-06-10 09:28:10 Siva

隐藏元素与隐藏属性，但像这样的CSS：<div style="display:none">或<div style="visibility:hidden">

来源

2016-06-10 08:58:27 monterico

JQuery/Javascript选择不可见元素

回答

相关问题