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

它完美。

的問題是，包括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()文本輸入指定的類。