Question

I want to select the first element with a certain class after the selected <input>. Here’s an example:

HTML:

<form>
    <input id="id_username" />
    <div class="status"></div>

    <input id="id_email" />
    <div class="status"></div>

    <input id="id_password" />
    <div class="status"></div>
</form>

jQuery:

function check_username() {
    $("#id_username").change(function() {
        var user = $("#id_username").val();
        if(user.length >= 3) {
            /* HOW SHOULD I CHANGE THIS ??? */
            $(".status").append('<img src="/site_media/images/loader.gif"> Checking availability...');
        }
    });
}

So I want this image “loader.gif” to appear only after the id_username input. I will use something similar on id_email and id_password.

Answer 1

You just have to use:

$(this).nextAll('.status').first().append(/* ...stuff... */);

This works even if there are separating elements between the the $(this) and the .status, if the two are immediately adjacent, you can just use:

$(this).next('.status').append(/* ...stuff... */);

References:

• first().
• next().
• nextAll().