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

Posted 2023-02-21

【中文标题】如何根据显示找到输入值：jquery中的块

【英文标题】：How to find the input value according to the display : block in jquery

【发布时间】：2021-07-17 03:24:58

【问题描述】：

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

【问题讨论】：

请澄清你是否真的想像你说的那样找到具有特定样式属性"display:block" 的那些，而不是一组可见的两个兄弟跨度，因为它们是完全不同的东西。

如果<span class="newspan1" style="display:inline-block"> </span> 上的类或可见性等发生变化，这是否重要或会如何影响您的问题/结果？

【参考方案1】：

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

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

关于可见性的补充：https://***.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>

【讨论】：

我对这个问题的答案做了很多假设。

【参考方案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>

【讨论】：

猜测意图很有趣吧？这么多选择取决于...

【参考方案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); 
       
 );

【讨论】：

当条件发生变化时，这可能会以多种方式中断 - 但它并不是“错误”，当然除了 .each 得到的不仅仅是你拥有的第一个。

在我看来，它是第一个，因为有“.span1”而不是“span”，我也不建议使用内联样式。是的，如果条件发生变化，它就会中断，我发布的是“如何”的想法

如果您根据 OP 中的实际 html 对其进行测试；您会得到 input3 input4 作为输出

“input3 因为它是第一个”来自 OP 的帖子是我对我的评论进行“第一个”解释的地方