jquery - 选择选定后具有特定类的第一个元素

Question

我想在 selected 之后选择具有某个类的第一个元素<input>。这是一个例子：

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...');
        }
    });
}

所以我希望这个图像“loader.gif”只在id_username输入之后出现。id_email我将在and上使用类似的东西id_password。

Answer 1

你只需要使用：

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

即使 the$(this)和 the之间有分隔元素，这也有效.status，如果两者紧邻，您可以使用：

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

参考：

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

Answer 2

试试这个，

function check_username() {
    $("#id_username").change(function() {
        var user = $("#id_username").val();
        if(user.length >= 3) {
           $(this).next(".status").append('<img src="/site_media/images/loader.gif" > Checking availability...');
        }
    });
}

Answer 3

在事件处理程序内部，您使用this来表示元素。至于.status，可以用$(this).next('.status')。

function check_username() {
    $("#id_username").change(function() {
        var user = $(this).val();
        if(user.length >= 3) {
           $(this).next('.status').append('<img src="/site_media/images/loader.gif" > Checking availability...');
        }
    });
}