标签Div不可能定位下一个元素，通过jquery - Tag Div impossible to locate the next element, via jquery

Tag Div impossible to locate the next element, via jquery

朋友们，我有一个问题:

下面的代码从单击的select中查找下一个元素:

<div class="caixa-dependentes2">
  <select name="campo0[1]" id="campo0[1]" class="form-control aa" required>
  <option value="Habilitado">Habilitado</option>
  <option value="Desabilitado">Desabilitado</option>                                                  
  </select>
  <input name="campo1[1]" class="bb" value="teste1" />
  <input name="campo2[1]" class="cc" value="teste2" />
  <br><br>
  <select name="campo0[2]" id="campo0[2]" class="form-control aa" required>
  <option value="Habilitado">Habilitado</option>
  <option value="Desabilitado">Desabilitado</option>                                                  
  </select>
  <input name="campo1[2]" class="bb" value="test3" />
  <input name="campo2[2]" class="cc" value="teste4" />
</div>

效果很好。

问题是，通过在字段中包含div格式子元素，它无法找到更多的下一个元素，将它们显示为undefined，请参阅代码:

<div class="caixa-dependentes2">
  <div>
    <select name="campo0[1]" id="campo0[1]" class="form-control aa" required>
    <option value="Habilitado">Habilitado</option>
    <option value="Desabilitado">Desabilitado</option>                                                  
  </select>
  </div>
  <div><input name="campo1[1]" class="bb" value="teste1" /></div>
  <div><input name="campo2[1]" class="cc" value="teste2" /></div>
  <div class="clearfix"></div>
  <div>
    <select name="campo0[2]" id="campo0[2]" class="form-control aa" required>
    <option value="Habilitado">Habilitado</option>
    <option value="Desabilitado">Desabilitado</option>                                                  
    </select>
  </div>
  <div><input name="campo1[2]" class="bb" value="test3" /></div>
  <div><input name="campo2[2]" class="cc" value="teste4" /></div>
</div>

我jquery:

$('.caixa-dependentes2').on('change', '.aa', function(){
    var proximo = $(this).nextAll('.bb').eq(0).val();  
    alert(proximo);
});

我犯了什么错误?

您可以通过这种方式找到下一个.bb元素(不是不可能的，但是使用jQuery的EZ):

$('.caixa-dependentes2').on('change', '.aa', function(){
    /* your select element > one parent > next sibling > find .bb */
    var proximo = $(this).parent().next().find('.bb').val();  
    alert(proximo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="caixa-dependentes2">
    <div>
        <select name="campo0[1]" id="campo0[1]" class="form-control aa" required>
            <option value="Habilitado">Habilitado</option>
            <option value="Desabilitado">Desabilitado</option>
        </select>
    </div>
    <div>
        <input name="campo1[1]" class="bb" value="teste1" />
    </div>
    <div>
        <input name="campo2[1]" class="cc" value="teste2" />
    </div>
    <div class="clearfix"></div>
    <div>
        <select name="campo0[2]" id="campo0[2]" class="form-control aa" required>
            <option value="Habilitado">Habilitado</option>
            <option value="Desabilitado">Desabilitado</option>
        </select>
    </div>
    <div>
        <input name="campo1[2]" class="bb" value="test3" />
    </div>
    <div>
        <input name="campo2[2]" class="cc" value="teste4" />
    </div>
</div>

也在JSFiddle

我还建议您将输入的选择框分组/包装成这样。这样，您就不会关心.bb或.cc在文档树中的位置，您只需到最接近的()包装器并找到()指定类的文本输入。