JQuery .next() not picking up next element with selector

Question

I've looked at the JQuery Documentation in relation to the .next() method and it states:

Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.

The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the immediately following sibling matches the selector, it remains in the newly constructed jQuery object; otherwise, it is excluded.

I'm trying to target an element within a div like so:

$("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"
        });
    }
});

The Markup is as follows:

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

I can remove the class hide from fa-times in both cases using the line:

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

But for some reason I cannot pick up fa-check . I'm wondering is it because of this:

If the immediately following sibling matches the selector, it remains in the newly constructed jQuery object; otherwise, it is excluded.

If that is the case can anyone advise me on where I'm going wrong and the next best way to detect the next element with fa-check as it's class.

I'm working on a JS Fiddle now, will post as soon as it's working.

Answer 1

Because fa-check is not the next sibling the input's parent element. You can either use .siblings() or .nextAll()

The .next() will not fetch the next sibling matching the given selector, it will search only the next sibling element and then check whether that matches the given selector.

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

Answer 2

As .fa-check is not immediate next element, you cannot use next() to get that element.

next() :

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Use siblings() to get the correct element.

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