在选定的 <input> 之后选择具有特定类的第一个元素答案

【问题标题】：Selecting the first element with a certain class after the selected <input>在选定的 <input> 之后选择具有特定类的第一个元素
【发布时间】：2012-08-17 19:59:08
【问题描述】：

我想在选定的<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 和id_password 上使用类似的东西。

【问题讨论】：

Find the next element that is not immediate?的可能重复

标签： jquery html

【解决方案1】：

你只需要使用：

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

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

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

参考资料：

【讨论】：

为什么不只是$(this).next('.status')？
因为我误读了这个问题，并假设了一个不存在的复杂性。
在给定的情况下，在这里，是的。另一方面，OP已经指定了课程对问题的重要性。因此，在这种情况下，选择器似乎相对重要。
只想说谢谢你指向.nextAll()。它真的很棒，这就是我要使用的。

【解决方案2】：

在事件处理程序中，您使用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...');
        }
    });
}

【讨论】：

【解决方案3】：

试试这个，

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

【讨论】：