针对文本框的 .prev() 最接近() 类的问题

Question

你能看看这个演示，让我知道为什么我不能在文本框#name之前定位第一个.fa类吗？

我正在尝试这个：

 $(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您能告诉我如何解决此问题吗？

谢谢

Answer 1

从 .closest(( 文档中，对于集合中的每个元素，通过测试元素本身并在 DOM 树中遍历其祖先来获取与选择器匹配的第一个元素，但在您的情况下.fa不是$('#name')的祖先。

而不是

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

尝试

elem.prev().children(".fa").addClass("err");

工作演示

Answer 2

试试这个： 小提琴

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

Answer 3

我想你错过了阅读html。
因为在输入字段之前，这是一个带有输入组插件类的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");
         }
     });
 });

http://jsfiddle.net/fjm63j56/3/