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

Question

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

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

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 代码都可以做我想做的事吗？

Answer 1

首先，您的标记中有语法错误，我删除了多余的行。

您可以使用过滤器来获取候选元素，然后获取其中的第一个或使用许多其他方法，以下是其中的一些：

关于可见性的补充：https://stackoverflow.com/a/17426800/125981

let mytds = $('table').find('tr').find('td');
var myinput = mytds.filter(function(index) {
  return ($(this).find('.span1:visible').length + $(this).find('.span2:visible').length) > 1
}).first();

let iv = myinput
  .closest('td')
  .find('input').val();
console.log(iv);

let iv2 = mytds.filter(function(index) {
  return $(this).find('.span1').css("display") == "block" && $(this).find('.span2').css("display") == "block";
}).first().closest('td').find('input').val();
console.log(iv2);


let iv3 = mytds.filter(function(index) {
  return ($(this).find('.span1, .span2').filter(":visible").length == 2);
}).first().closest('td').find('input').val();
console.log(iv3);

let iv4 = mytds.children('.span1:visible ~ .span2:visible')
  .first().siblings('input').val();
console.log(iv4);

let iv5 = mytds.children('.span1:visible ~ .span2:visible')
  .siblings('input').first().val();
console.log(iv5);

let iv6 = mytds.children('.span1:visible ~ .span2:visible')
  .siblings('input').eq(0).val();
console.log("iv6:", iv6);

let iv7 = mytds.children().filter('.span1:visible ~ .span2:visible')
  .siblings('input').val();
console.log("iv7:", iv7);

let iv8 = mytds.has('.span1:visible').has('.span2:visible').find('input').first().val();
console.log(iv8);

let iv9 = mytds.has('.span1:visible').has('.span2:visible').find('input').val();
console.log(iv9);

<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>

Answer 2

您可以使用兄弟选择器或使用检查兄弟长度的过滤器（函数）来做到这一点

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>

Answer 3

使用每个功能

 $(".span1").each(function(){
    // get style attribute value of span class span1
    var style = $(this).attr("style");
    // get style attribute value of span which is right after class span1
    var style_next = $(this).next().attr("style");
    // if both styles are display:block
    if(style == "display:block" && style_next == "display:block"){
        // variable value is set to value of input which is previous to span1 element
        var value = $(this).prev().val();
        // do whatever you need with that value
        console.log(value); 
    }   
 });