Question

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

给定一个表示一组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小提琴工作，一旦它正在工作就会发布。

Answer 1

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

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

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

Answer 2

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

next()：

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

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

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

JQuery .next（）没有用选择器拾取下一个元素

2 个答案: