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元素（不是不可能的，但是带有jQuery的EZ）：

＆＃13;

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

＆＃13;

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

＆＃13;

同样在 JSFiddle

上

我还建议您使用输入 this way 对选择框进行分组/打包。这样你就不会关心.bb或.cc在文档树中的位置，你只需要上传closest()包装和find()文本输入指定。

Tag Div无法通过jquery找到下一个元素

1 个答案: