Question

我有一个带标签的页面，我想选择每个标签上的每个跨度/输入，但不是隐藏div中的那些。

隐藏标签与隐藏属性之间存在差异吗？对于承诺这个问题，有我的代码：

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

如果我删除if条件，则输出为：

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

我期待的是：

span1
inp1
span2
inp2
span4
inp4
inp5
span5

还有我的JSFiddle for live demo

我不知道这是否清楚，请在评论中提出更多解释，并抱歉我的英语。感谢

Answer 1

这个有两个解决方案

$("#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"));
   }

})
})

Answer 2

隐藏元素不是隐藏属性，而是使用这样的CSS：<div style="display:none">或<div style="visibility:hidden">

JQuery / Javascript选择不可见的元素

2 个答案: