我想在选定的<input>
之后选择具有特定类的第一个元素。这是一个例子:
<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>
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
上使用类似的内容。
答案 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...');
}
});
}