Javascript 针对文本框的.prev（）最近（）类的问题

你能看一下并告诉我为什么我不能把第一个

.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>

名称
接触


$（函数（）{
功能TXT输入（elem）{
var inputData=$.trim（elem.val（））；
如果（inputData==“”）{
$（this）.prev（）最近（“.fa”）.addClass（“err”）；
}
否则{
返回输入数据；
}
}
$（“#btn联系人请求”）。在（“单击”，功能（e）{
if（txtInput（$（'#name'）））{
$（“#结果”）.html（“无错误”）；
}否则{
$（“#结果”）.html（“错误”）；
}
});
});

但是不能瞄准

.fa

你能告诉我如何解决这个问题吗

谢谢，

From，对于集合中的每个元素，通过测试元素本身并在DOM树中向上遍历其祖先来获取与选择器匹配的第一个元素，但在您的例子中，

.fa

不是

$（“#name”）的祖先。

而不是

$(this).prev().closest(".fa").addClass("err");

试一试

试试这个：

---

我想你错过了阅读html。
因为在输入字段之前，它是一个div，其类为input group addon。 因此，您的选择器不正确

我将您的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");
         }

     });

 });

---

谢谢Kartikeya，它正在工作，但您能告诉我为什么要将此更改为elem吗？您应该使用elem，它会让您的生活更轻松。你可以这样做，但你需要修改你的代码。$（这个）在这里不起作用。！没错，你能告诉我为什么吗？这和范围有关。你能告诉我“this”指的是什么吗？@Suffii..它不适用于

$（this）

，因为

$（this）

指向当前元素，但在你的情况下，你是从

btn contact rquest

调用

txtInput（elem）

，所以在你的情况下，

$（this）

不在范围内..不需要使用

elem

的

$

，它已经是一个Jquery对象。

$(elem).parent().find(".fa:eq(0)").addClass("err");

 $(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");
         }

     });

 });