Javascript JQuery.next（）未使用选择器拾取下一个元素

我已经查看了与

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

。我想知道这是因为：

如果紧跟其后的同级匹配选择器，则它将保持不变 在新构造的jQuery对象中；否则，它将被排除在外

如果是这样的话，谁能告诉我哪里出了问题，以及用

fa check

作为类来检测下一个元素的下一个最佳方法

---

我现在正在处理JS Fiddle，它一工作就会发布。

因为

fa check

不是输入的父元素的下一个同级元素。您可以使用.sides（）或.nextAll（）

.next（）不会获取与给定选择器匹配的下一个同级元素，它将只搜索下一个同级元素，然后检查该元素是否与给定选择器匹配

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

---

由于

.fa check

不是立即下一个元素，因此不能使用

next（）

获取该元素

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

:

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

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

用于获取正确的元素

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

---

您的选择器中缺少方括号：

$（“输入[name='first-name'）

。它应该是-

$（“输入[name='first-name']）

是的，您是对的，选择器仍然工作-tbf-我没想到选择器引擎会那么宽容…是的，我自己对此感到有点震惊！