jquery - 如何根据显示找到输入值：jquery中的块

Question

1-我在一个表中有多个 tr，tr 中的每个 td 有 2 个跨度，一个输入有一个值，每个跨度可能会动态显示：块或显示：无。

2-我希望我得到 td 中的输入值，它有 2 个带 display:block 的跨度，在我的示例中，输入结果必须选择为：input3，因为它是第一个 td 有 2 个带 display:block 的跨度。

3-这是我的表格示例：

var inputValue = $('.span1:visible:first, .span2:visible:first')
  .parent()
  .parent()
  .find('input').val();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input value="input1">
      <span class="span1" style="display:none">span1</span>
      <span class="span2" style="display:block">span2</span>
  </tr>
  <tr>
    </td>
    <td>
      <input value="input2">
      <span class="span1" style="display:block">span1</span>
      <span class="span2" style="display:none">span2</span>
    </td>
  </tr>
  <tr>
    <td>
      <input value="input3">
      <span class="span1" style="display:block">span1</span>
      <span class="span2" style="display:block">span2</span>
    </td>
  </tr>
  <tr>
    <td>
      <input value="input4">
      <span class="span1" style="display:block">span1</span>
      <span class="span2" style="display:block">span2</span>
    </td>
  </tr>
</table>

4-我写了这段代码，但我知道这是错误的：

 <script>
 var inputValue = $('.span1:visible:first, .span2:visible:first').parent().parent().find('input').val();
 </script>

5-任何帮助jquery代码可以做我想要的吗？

标签： jqueryjquery-selectors

Answer 1

您可以使用兄弟选择器或使用检查兄弟长度的过滤器（函数）来执行此操作

var inputValue = $('.span1:visible ~ .span2:visible').siblings('input').val();
console.log('Using siblings selector: ', inputValue)

// OR
var inputValue2 = $('td input').filter(function(){
    return $(this).siblings('span:visible').length === 2;
}).val();
console.log('Using filter: ', inputValue2)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input value="input1">
      <span class="span1" style="display:none">span1</span>
      <span class="span2" style="display:block">span2</span>
  </tr>
  <tr>
    
    <td>
      <input value="input2">
      <span class="span1" style="display:block">span1</span>
      <span class="span2" style="display:none">span2</span>
    </td>
  </tr>
  <tr>
    <td>
      <input value="input3">
      <span class="span1" style="display:block">span1</span>
      <span class="span2" style="display:block">span2</span>
    </td>
  </tr>
  <tr>
    <td>
      <input value="input4">
      <span class="span1" style="display:block">span1</span>
      <span class="span2" style="display:block">span2</span>
    </td>
  </tr>
</table>