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選擇不可見元素

回答

相關問題