javascript - jQuery : Target 3rd element to follow (not child)

Question

我有一个 div <div class="other_value">它有一个 display:none (类 other_value 在 html 片段中)，我想在我的 html 选择中选择“其他”时显示它。

如果隐藏的 div 就在选择的旁边，我可以做到:

$('.select-additional-infos').on('change', function () {

    if ($(this).val() === "autre") {
        $(this).next().show();
    } else {
        $(this).next().hide();
    }
}); 

但是，我添加了一个 <input type="hidden">在 <select> 之间这个隐藏的 div <div class="other_value">而且我无法定位此 div ( <div class="other_value"> )。

这是我试过的:

$(this).next().find('.other_value').show();

$(this).closest('div').find('.other_value').show();  

这是HTML

<select class="form-control select-additional-infos" id="infos_21" name="60_infos_21">
    <option value="non renseigné" selected="selected">non renseigné</option>
    <option value="général">1</option>
    <option value="agricole">2</option>
    <option value="non salarié">3</option>
    <option value="autre">other</option>
</select>

<input type="hidden" value="label : " name="xxx">

<div class="other_value">
    <!— some html —>
</div>

片段

$(this).next().find('.other_value').show();

.other_value {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control select-additional-infos" id="infos_21" name="60_infos_21">
    <option value="non renseigné" selected="selected">non renseigné</option>
    <option value="général">1</option>
    <option value="agricole">2</option>
    <option value="non salarié">3</option>
    <option value="autre">other</option>
</select>

<input type="hidden" value="label : " name="xxx">

<div class="other_value">
    <!— some html —>
</div>

<select class="form-control select-additional-infos" id="infos_22" name="60_infos_22">
    <option value="non renseigné" selected="selected">non renseigné</option>
    <option value="général">1</option>
    <option value="agricole">2</option>
    <option value="non salarié">3</option>
    <option value="autre">other</option>
</select>

<input type="hidden" value="label : " name="xxx">

<div class="other_value">
    <!— some html —>
</div>

编辑:

我忘了说我有多个 select在同一页面中(我从存储在数据库中的数据动态构建表单)所以我不知道选择名称。我需要使用 $this 的东西我想。

Answer 1

您可以使用 nextAll()，然后使用 .other_value 类首先选择。这是具有多个选择的演示 DEMO

$('select').change(function() {
  $(this).nextAll('.other_value:first').toggle($(this).val() == 'autre')
})

.other_value {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control select-additional-infos" id="infos_21" name="60_infos_21">
    <option value="non renseigné" selected="selected">non renseigné</option>
    <option value="général">1</option>
    <option value="agricole">2</option>
    <option value="non salarié">3</option>
    <option value="autre">other</option>
</select>

<input type="hidden" value="label : " name="xxx">
<div class="other_value" >
   Other 1
</div>
<div class="other_value" >
   Other 2
</div>