jQuery .next（）不使用選擇器拾取下一個元素

Question

我已經看過有關.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使用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');