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

Question

我有几个 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");

如何使用 class "first" 找到下一个输入字段？请记住，我不知道它的 ID，它不一定是 first_2。

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

Answer 1

您可以使用自上而下的方法来完成此操作。使用 :has and nextAll()

从 parent 容器接近它

$('.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>

Answer 2

试试这个代码：

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>

Answer 3

我想这就是你想要的。

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

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

Answer 4

使用 parents().next().find(...).first() 然后你可以用 class"first" 找到下一个输入，无论 HTML 树有多深，class或父元素的类型。

$('#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>

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

Find next input field of specific class

jquery

input

next