查找特定 class 的下一个输入字段
Find next input field of specific class
我有几个 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。
您可以使用自上而下的方法来完成此操作。使用 :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>
试试这个代码:
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>
我想这就是你想要的。
var nextFirst = $("#second_1").closest('content').next().find('.first');
使用closest(..).next()
获取下一行输入。
使用 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>
我有几个 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。
您可以使用自上而下的方法来完成此操作。使用 :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>
试试这个代码:
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>
我想这就是你想要的。
var nextFirst = $("#second_1").closest('content').next().find('.first');
使用closest(..).next()
获取下一行输入。
使用 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>