How to find the input value according to the display : block in jquery

Question

1- I have multiples tr in a table, every td in tr has 2 spans and an input has a value, every span maybe it will be display:block or display:none dynamicly.

2- I want that i get the value of the input in the td which has 2 spans with display: block, in my exemple the input result must be select is : input3 because it's the first td has 2 span with display:block.

3- This is my table exemple:

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- i wrote this code yo fo that but i know it's wrong :

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

5- any help jquery code can do what i want please?

Answer 1

You can do it using a siblings selector or using a filter(function) that checks siblings length

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>