选择当前选择器之后的下一个类

Select next occurance of a class after the current selector

本文关键字：下一个 之后 选择器 选择      更新时间：2023-09-26

我正在尝试根据对另一个表单字段"idVerification"的更改来更改一个表单字段"idSerialNo"的状态，但我无法访问正确的元素，因为页面上有三个表单。

每个 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 元素上的换行是由于自定义外观造成的。

我正在尝试为三种形式中的每一种select.idVerification元素注册一个事件侦听器。当选择元素被更改时，我想检查它是否是默认值，如果是，则隐藏div 块（此处为 div#sigIDSerialNo_field ），并将 input.idSerialNo 的值设置为 "" ;如果 select 元素的值不是默认值，它将取消隐藏div#sigIDSerialNo_field ，如果它是隐藏的。我的问题是每个要显示/隐藏的div 的 id 会不同，并且不受我的控制。

我想做的是选择此.idVerification之后的下一个.idSerialNo，然后我可以获取.idSerialNo元素的祖父级。但是，我发现.next()仅适用于直系兄弟姐妹，所以我不能使用它。

有没有办法实现我的目标？

您可以像

这样以相同的形式进入下一个.idSerialNo：

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

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

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

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

添加一个

事件侦听器来检查所选项目是否是默认的（我假设它是第一个元素 - 索引 0），并隐藏最接近的div.clearfix类的同级div.clearfix并清除同级中的输入。

查看更新的演示。使用 next() 假定div s 之间没有元素。我将其更改为 siblings()，以确保即使div之间有其他元素，它也能正常工作。

演示 

$(function () {
    $("select.idVerification").change(function () {
        var divToHide = $(this).closest("div.clearfix").siblings("div.clearfix");
        if ($(this)[0].selectedIndex == 0) {
            // clear input
            divToHide.find(".idSerialNo").val("");
            // hide
            divToHide.hide();
        } else {
            // show 
            divToHide.show();
        }
    });
});

我根据 jfriend00 和 Lobo 的答案决定采用以下解决方案：

var idVerification = $("select.idVerification");
idVerification.each(function() {
    var nextIDSerialNo_field = $(this).closest("div.clearfix").next();
    nextIDSerialNo_field.addClass('hidden');
    nextIDSerialNo_field.hide(0);
});
idVerification.change(function() {
    var nextIDSerialNo = $(this).closest("div.clearfix").next().find(".idSerialNo");
    var nextIDSerialNo_field = $(this).closest("div.clearfix").next();
    if($(this).val() === "NONE"){
        nextIDSerialNo_field.hide('slow');
        nextIDSerialNo_field.addClass("hidden");
        nextIDSerialNo.val("");
    } else {
        nextIDSerialNo_field.removeClass("hidden");
        nextIDSerialNo_field.show("slow");
    }
});
相关文章：