javascript - 如何选择 block 显示的输入？

Question

这是我的代码:

$('button').on('click', function(){
  console.log($('.searchInput').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='searchInput' type='text' style='display:none' />
<input class='searchInput' type='text' />
<input class='searchInput' type='text' style='display:none' />
<button>check</button>

如您所见，$('.searchInput') 始终选择第一个输入。但是我想选择这样一个没有隐藏的输入。我该怎么做？

Answer 1

使用 $('.searchInput:visible')。 :visible 将采用仅可见的元素

$('button').on('click', function(){
  console.log($('.searchInput:visible').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='searchInput' type='text' style='display:none' />
<input class='searchInput' type='text' />
<input class='searchInput' type='text' style='display:none' />
<button>check</button>