请您查看This Demo并告诉我为什么我无法在文本框.fa
之前定位第一个#name
课程?
我正在尝试这个:
$(this).prev().closest(".fa").addClass("err");
此代码
<div class="row">
<div class="col-md-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user err-test">Name</i>
</div>
<input type="text" class="form-control form-input-gray" id="name" placeholder="Enter Your Name" />
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default btn-block" id="btn-contact-rquest">Contact</button>
<br />
<div id="result"></div>
<script>
$(function () {
function txtInput(elem) {
var inputData = $.trim(elem.val());
if (inputData == "") {
$(this).prev().closest(".fa").addClass("err");
}
else{
return inputData;
}
}
$("#btn-contact-rquest").on("click", function (e) {
if (txtInput($('#name'))) {
$("#result").html("No Error");
} else {
$("#result").html("Error");
}
});
});
</script>
但是无法定位.fa
你可以告诉我如何解决这个问题吗?
谢谢,
答案 0 :(得分:2)
从.closest() docs开始,对于集合中的每个元素,通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素,但在您的情况下.fa
是不是$('#name')
的祖先。
而不是
$(this).prev().closest(".fa").addClass("err");
尝试
elem.prev().children(".fa").addClass("err");
答案 1 :(得分:0)
试试这个:FIDDLE
$(elem).parent().find(".fa:eq(0)").addClass("err");
答案 2 :(得分:0)
我想你错过了阅读HTML。
因为在输入字段之前,这是一个带有input-group-addon类的div。
因此,您的选择器不正确。
我将你的JS改为:
$(function () {
function txtInput(elem) {
var inputData = $(elem).val();
if (inputData != "") {
return inputData;
}
else{
$(".input-group").addClass("err");
}
}
$("#btn-contact-rquest").on("click", function (e) {
if (txtInput($('#name'))) {
$("#result").html("No Error");
} else {
$("#result").html("Error");
}
});
});