查找特定类的下一个输入字段

Posted 2023-02-25

【中文标题】查找特定类的下一个输入字段

【英文标题】：Find next input field of specific class

【发布时间】：2015-05-23 14:20:37

【问题描述】：

我有几个 div，每个 div 有两个输入字段，如下所示：

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_1" />
            <input type="text" class="second" id="second_1" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_2" />
            <input type="text" class="second" id="second_2" />
        </div>
    </div>
</div>

假设我有一个 ID 为 second_1 的输入字段，并为其分配一些值：

$("#second_1").val("Hello");

我怎样才能找到下一个带有"first" 类的输入字段？请记住，我不知道它的 ID，不一定是 first_2。

换句话说，我也想为first_2 赋值，但不知道它的ID。

【参考方案1】：

我想这就是你想要的。

var nextFirst = $("#second_1").closest('content').next().find('.first');

使用closest(..).next() 获取下一行输入。

【参考方案2】：

使用parents().next().find(...).first()，您可以找到下一个带有class"first"的输入，无论html树有多深，也不管您的父元素的类或类型。

$('#second_1').parents().next().find(".first").first().val("Hello");

$('#second_1')
  .val("Starting here")
  .parents().next().find(".first").first().val("Hello");

div  padding: 2px; 
#wrapper  border: 1px grey solid; 
.subcontent  border: 1px grey dashed; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="content">
    <div class="subcontent">
        <input type="text" class="first" id="first_1" />
        <input type="text" class="second" id="second_1">
    </div>
  </div>
  <div class="content">
    <div class="subcontent">
        <input type="text" class="first" id="first_2" />
        <input type="text" class="second" id="second_2" />
    </div>
  </div>
  <div class="content">
    <div class="subcontent">
        <input type="text" class="first" id="first_3" />
        <input type="text" class="second" id="second_3" />
    </div>
  </div>
  <div class="content">
    <input type="text" class="first" id="first_4" />
  </div>
</div>
<div class="content">
  <input type="text" class="first" id="first_5" />
  <input type="text" class="second" id="second_5" />
</div>

【讨论】：

它工作得很好，它应该是公认的答案，因为它在所有情况下都不起作用。谢谢。

【参考方案3】：

您可以使用自上而下的方法来做到这一点。使用 :has 和 nextAll()

从

父

容器接近它

$('.content:has(#first_1)').nextAll('.content:has(.first)').find('.first');

console.log($('.content:has(#first_1)').nextAll('.content:has(.first)').find('.first'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_1" />
            <input type="text" class="second" id="second_1" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_2" />
            <input type="text" class="second" id="second_2" />
        </div>
    </div>
</div>

【讨论】：

有趣。这是如何运作的。 .content:has(#first_1) 不会从集合中排除 #first_2 吗？

@MathewFoscarini，不，它甚至不包括它的孩子。它的意思是，给我 具有 #first_1

的 .content 元素

对，但不会只返回 1 个元素。这意味着next(..) 将返回 0？

@MathewFoscarini，它将返回下一个父 div。这就是为什么我最后有 find('.first')

噢噢！！我现在明白了，因为您使用的是has。我以前没用过。很好:)

【参考方案4】：

试试这个代码：

var myInputs = document.getElementsByClassName("first");
for (var i = 0; i < myInputs.length; ++i) 
    var item = myInputs[i];  
    item.value = 'your value';

            var myInputs = document.getElementsByClassName("first");
			for (var i = 0; i < myInputs.length; ++i) 
				var item = myInputs[i];  
				item.value = 'your value';
			

    <div id="wrapper">
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_1" />
            <input type="text" class="second" id="second_1" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_2" />
            <input type="text" class="second" id="second_2" />
        </div>
    </div>