javascript 找到下一个 div-jquery 中存在的下一个元素的 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7308318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
find the id of the next element present in next div-jquery
提问by maaz
My form has number of input elements. When i looping through some elements i need to find the idof the next element which is in next div.
我的表单有多个输入元素。当我遍历某些元素时，我需要找到id下一个 div 中的下一个元素的 。
The whole code is in jsfiddle
整个代码在jsfiddle
$(":text[name^=sedan]").each(function(i){
var curTxtBox = $(this);
var curId = this.id;
alert(curId);
//var nextTextFieldId = $(this).closest('div').find('.number').attr("id"); // gives undefined
var nextTextFieldId = $('#'+curId).next('div:input[type=text]').attr("id"); // gives undefined
alert(nextTextFieldId )
});
this is not working. nextTextFieldIdgives value undefined.
这是行不通的。nextTextFieldId给出未定义的值。
html
html
<div class="first">
<div class="second">
<input type="text" class ="myClass" name="sedan1" id = "sedan1" value="1" />
</div>
<div class="third">
<input type="text" class ="yourClass" name="suv1" id ="suv1" value="2"/>
</div>
</div>
<div class="first">
<div class="second">
<input type="text" class ="myClass" name="sedan2" id = "sedan2" value="3" />
</div>
<div class="third">
<input type="text" class ="yourClass" name="suv2" id = "suv2" value="" />
</div>
</div>
回答by Igor Dymov
var nextTextFieldId = $(this).parent().next().find(':text').attr("id");
回答by Jon
Expanding my comment (summary: don't do this, simply iterate over the jQuery object with forand be happy) into an answer:
扩展我的评论（总结：不要这样做，只需使用 jQuery 对象迭代for并感到高兴）到答案中：
$(document).ready(function(){
var $textBoxes = $(":text[name^=sedan]");
for(var i = 0; i < $textBoxes.length; ++i) {
var $curTxtBox = $textBoxes.eq(i);
alert($curTxtBox.attr("id"));
if (i < $textBoxes.length - 1) {
var nextTextBoxId = $textBoxes.eq(i + 1).attr("id");
alert(nextTextBoxId);
}
else {
// This was the last one, there is no "next" textbox
}
}
});
Note that:
注意：
- Doing things this way does not require walking the DOM tree all the time like naive approaches using
each(which end up searching the tree for the same element multiple times). - This approach will work correctly as long as you keep the
sedanXXids. Approaches that re-walk the DOM tree will break as soon as there is any significant change to your HTML. - If all you want is the id's, and they are incrementing integers, even this is overkill.
- 以这种方式做事不需要像使用天真的方法一样一直遍历 DOM 树
each（最终会多次搜索树以查找相同的元素）。 - 只要您保留
sedanXXID，这种方法就会正常工作。一旦您的 HTML 发生任何重大变化，重新遍历 DOM 树的方法就会失效。 - 如果您想要的只是 id，并且它们正在递增整数，那么即使这样也是过大的。
回答by dnuttle
Try changing to this line:
尝试更改为这一行：
var nextTextFieldId = $('#'+curId).parent().next('div:input[type=text]').attr("id"); // gives undefined
Your line expects the input tag to have a sibling div tag.
您的行期望输入标记具有同级 div 标记。
