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

时间:2012-08-17 19:59:08

标签: jquery html

我想在选定的<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_emailid_password上使用类似的内容。

3 个答案:

答案 0 :(得分:9)

你必须使用:

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

即使$(this).status之间存在分隔元素,如果两者紧邻,您也可以使用:

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

参考文献:

答案 1 :(得分: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...');
        }
    });
}

答案 2 :(得分: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...');
        }
    });
}