JQuery .next() 没有使用选择器拾取下一个元素

Posted 2023-02-25

【中文标题】JQuery .next() 没有使用选择器拾取下一个元素

【英文标题】：JQuery .next() not picking up next element with selector

【发布时间】：2015-07-21 09:10:53

【问题描述】：

我查看了与.next() 方法相关的JQuery 文档，它指出：

给定一个代表一组 DOM 元素的 jQuery 对象， .next() 方法允许我们搜索紧随其后的内容 这些元素在 DOM 树中的兄弟元素并构造一个新的 jQuery 来自匹配元素的对象。

该方法可选地接受相同类型的选择器表达式 我们可以传递给 $() 函数。如果紧随其后 兄弟匹配选择器，它保留在新构造的 jQuery 对象；否则，将其排除在外。

我正在尝试像这样定位 div 中的元素：

$("input[name='first-name'").keyup(function () 
    if (!name($(this).val())) 
        $(this).parent().next(".fa-times").removeClass('hide');
        $(this).parent().next(".fa-check").addClass('hide');
        $(this).css(
            "background": "rgb(237, 209, 209)",
            "color": "red",
            "border": "1px solid red"
        );
     else 
        $(this).parent().next(".fa-times").addClass('hide');
        $(this).parent().next(".fa-check").removeClass('hide');
        $(this).css(
            "background": "rgb(209, 237, 209)",
            "color": "green",
            "border": "1px solid green"
        );
    
);

标记如下：

<div class="col-md-6">
    <label class="control-label">First Name</label>
    <div id="fname-input">
        <span class="wpcf7-form-control-wrap first-name">
            <input type="text" name="first-name" value="" size="40" maxlength="80" minlength="2" aria-required="true" aria-invalid="false>
        </span>
        <i class="fa fa-times hide"></i>
        <i class="fa fa-check hide"></i>
    </div>
</div>

在这两种情况下，我都可以使用以下行从fa-times 中删除类隐藏：

$(this).parent().next(".fa-times").removeClass('hide');

但由于某种原因，我无法接听fa-check。我想知道是不是因为这个：

如果紧随其后的兄弟与选择器匹配，则保留 在新建的 jQuery 对象中；否则，将其排除在外。

如果是这种情况，任何人都可以告诉我我哪里出错了，以及用fa-check 检测下一个元素的下一个最佳方法是它的类。

我现在正在开发一个 JS Fiddle，一旦它开始工作就会发布。

【问题讨论】：

您的选择器中缺少方括号：$("input[name='first-name'")。应该是 - $("input[name='first-name']")

是的，你是对的，选择器仍然有效 - 待定 - 我没想到选择器引擎会这么宽容......

是的，我自己也有点震惊！

【参考方案1】：

因为fa-check 不是输入的父元素的下一个兄弟。您可以使用 .siblings() 或 .nextAll()

.next() 不会获取与给定选择器匹配的下一个兄弟元素，它只会搜索下一个兄弟元素，然后检查它是否与给定选择器匹配。

$(this).parent().nextAll(".fa-check").removeClass('hide');
$(this).parent().siblings(".fa-check").removeClass('hide');

【参考方案2】：

由于.fa-check 不是紧邻的下一个元素，因此您不能使用next() 来获取该元素。

next():

获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时才会检索下一个兄弟。

使用siblings() 获取正确的元素。

$(this).parent().siblings(".fa-times").removeClass('hide');