Question

我的表单包含多个输入元素。当我遍历一些元素时，我需要找到下一个div中下一个元素的id。

整个代码位于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 ) 

});

这不起作用。 nextTextFieldId给出未定义的值。

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>

Answer 1

var nextTextFieldId = $(this).parent().next().find(':text').attr("id");

Answer 2

扩展我的评论（摘要：不要这样做，只需用for迭代jQuery对象并快乐）到答案中：

$(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
        }
    }
});

请注意：

以这种方式做事不需要像使用each的天真方法一样遍历DOM树（最终会多次在树中搜索相同的元素）。
只要您保留sedanXX ID，此方法就能正常运行。只要HTML发生重大变化，重新遍历DOM树的方法就会中断。
如果您想要的只是id，并且它们正在递增整数，那么即使这样也是过度的。

Answer 3

尝试更改为此行：

var nextTextFieldId = $('#'+curId).parent().next('div:input[type=text]').attr("id");   // gives undefined

您的行要求输入标记具有兄弟div标记。

找到下一个div-jquery中存在的下一个元素的id

3 个答案: