Tag Div невозможно найти следующий элемент, с помощью JQuery

Question

Друзья, у меня следующий вопрос:

Следующий ниже код находит следующий элемент из щелкнул выберите:

<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> 

Он прекрасно работает.

Проблема заключается в том, что, в том числе дивы форматирования дочерей в поле, он не может найти больше следующий элемент, показывая их как 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); 
}); 

Какая ошибка я сделал?

Answer 1

Вы можете найти следующий .bb элемент таким образом (не невозможно, но EZ с JQuery):

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

Я также хотел бы предложить вам группу/оберните поле выбора со входами this way. Таким образом вам все равно, где .bb или .cc находится в дереве документов, вы просто подходите к обложке closest() и find() ввод текста с указанным классом.