jquery - 如何选择不隐藏的div中的输入元素？

Question

如何使用 jQuery 选择未从下面的表单中隐藏的元素input数组？select

  <form class="FORM_1">
    <div class="a" style="display:inline-block><input id="A"/></div>

    <div class="a" style="display:none"><input id="B"/></div>

    <div class="a"><select id="C"/></div>
    <div class="a"style="display:none"><select id="D"/></div>

    <div class="a style="display:inline-block"><input id="F"/></div>
   </form>

我尝试使用下面的代码，但它不能按我的需要工作。

$('.FORM_1 input, .FORM_1 select').prop('display', 'inline-block').each(function(index){  
  var input = $(this);      
  console.log('Type: ' + input.attr('type'));
});

标签： jquerycssselect

Answer 1

$(".FORM_1 input:visible, .FORM_1 select:visible").each(function(index) {
  var input = $(this);
  console.log("Type: " + input.prop("type"));
});

.a {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="FORM_1">
  <div class="a"><input id="A" type="text" />
  </div>

  <div class="a" style="display:none"><input id="B" type="text" /></div>

  <div class="a"><select id="C"></select></div>
  <div class="a" style="display:none"><select id="D"></select></div>

  <div class="a"><input id="F" type="text" /></div>
</form>