javascript - 选择当前选择器之后出现的下一个类

Question

我试图根据对另一个表单字段“idSerialNo”的更改来更改一个表单字段的状态，“idVerification”，但我很难访问正确的元素，因为页面上有三种表单。

每个 for 的相关部分如下所示:

// Input 1, a select element
<div id="sigIDVerification_field" class="clearfix  ">
    <label for="sigIDVerification"> … </label>
    <div class="input">
        <select id="sigIDVerification" class="span5 selectpicker sortable idVerification" name="sigIDVerification" style="display: none;"> … </select>
        <div class="btn-group bootstrap-select span5 sortable idVerification"> … </div>
        <span class="help-inline"></span>
        <span class="help-block"></span>
    </div>
</div>
// Input 2, a text input
<div id="sigIDSerialNo_field" class="clearfix  ">
    <label for="sigIDSerialNo"> … </label>
    <div class="input">
        <input id="sigIDSerialNo" class="span5 idSerialNo" type="text" value="" name="sigIDSerialNo"></input>
        <span class="help-inline"></span>
        <span class="help-block"></span>
    </div>
</div>

请注意，选择元素上的换行是由于自定义皮肤。

我正在尝试为 select.idVerification 注册一个事件监听器三种形式中每一种的元素。更改选择元素时，我想检查它是否是默认值，如果是，则隐藏 div block (此处为 div#sigIDSerialNo_field )并设置 input.idSerialNo 的值至 "" ;如果选择元素的值不是默认值，它将取消隐藏 div#sigIDSerialNo_field , 如果它是隐藏的。我的问题是每个要显示/隐藏的 div 的 id 都是不同的，这是我无法控制的。

我想做的是选择下一个 .idSerialNo在此之后.idVerification然后我可以得到 .idSerialNo 的祖 parent 元素。但是，我发现 .next()仅适用于直接 sibling ，所以我不能使用它。

有什么方法可以实现我的目标吗？

Answer 1

您可以像这样以相同的形式获取下一个 .idSerialNo:

// assume item is jQuery object pointing to your current .idSerialNo
var nextSerialNo = item.closest("div.clearfix").next().find(".idSerialNo");

这会找到当前 .idSerialNo 的祖 parent ，然后在 HTML 中找到与您当前所在表单处于同一级别的下一个 div，然后找到 。该 div 中的 idSerialNo 对象。

此代码假定选择器 "div.clearfix" 将始终标识正确的父级。如果不是这种情况，那么您必须始终如一地在该父级上放置一个更好的类，或者编写更多代码以找到具有适用于所有 HTML 的任何逻辑的正确父级对象。你没有公开所有的 HTML，所以我无法真正确定如果 "div.clearfix" 不能在所有地方工作时哪种模式会起作用。

此导航的关键是在层次结构中向上移动到正确的父级，然后从那里转到 .next()，然后在右侧使用 .find() parent 。