jquery - 使用 .after() 和 .insertAfter() 方法将 div 添加到所需位置的问题

Question

我正在尝试使用 after() 方法在 jQuery 中的一个类之后添加一个错误消息 div。

我原来的 HTML 代码是这样的：

<div class="input-group">
      <span class="input-group-addon"> Name</span>
      <input type="text" name="myname" id="myname" class="form-control" pattern="[A-Za-z ]+" autofocus="" required="" placeholder="Your Name">
</div>

我正在使用这个 jquery 代码

$('.input-group :input[required]').each(function() {
    if ($(this).val()==='') {
    $(this).after('<div class="err">This is a Requierd Field</div>');
}

运行代码后，将.errdiv 添加到页面但在内部.input-group但我需要在该类（ ）之后.input-group添加它。这是源代码：

我还尝试将 jQuery.insertAfter()方法用作：

$('<div class="err">This is a Required Field</div>').insertAfter('.input-group');

它将 div 插入到.err所需的位置，但是它正在根据.each()功能复制 div！例如，如果我有三个输入，它会为三个元素循环三次！

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

谢谢

Answer 1

使用parent()或closest()

 $('.input-group :input[required]').each(function() {
   var $this=$(this);
   if ($this.val()==='') {
       $this.parent().after('<div class="err">This is a Requierd Field</div>');
   }
 });

或者

 $(this).closest('.input-group').after('<div class="err">This is a Requierd Field</div>');