按类查找下一个元素（可能不是兄弟）jquery [重复]

Question

jquery 3.3.1

我有以下html：

    <div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
                        <label for="first">First Name:</label>
                        <input type="first" field="FirstName" type="text" class="form-control validate" />
                    </div>
                    <div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
                        <label for="mi">Middle Initial:</label>
                        <input type="mi" field="MI" type="text" class="form-control input-sm validate" />
                    </div>
                    <div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
                            <label for="last">Last Name:</label>
                            <input type="last" field="LastName" type="text" class="form-control validate" />
                    </div>
                    <div class="clearfix"></div>

                    <div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
                            <label for="address">Address:</label>
                            <input type="address" field="Address" type="text" class="form-control input-lg validate" />
                    </div>

当我专注于具有类 validate 的输入字段时，我想找到具有类 validate 的下一个字段。它不会是当前元素的兄弟。

这是我的 jquery 代码：

  $('.validate').focus(function (e) {
            let ele = $(this).parent().next('.form-group').find('.validate');
            let attr = ele.attr('field');
            console.log('next: ' + attr);

        });

如果在我执行 clearfix 之后出现下一个带有 validate 类的元素：

 <div class="clearfix"></div>

我的元素在我的 jquery 代码中未定义。因此，当我从输入姓氏中抽出时，我想要的下一个元素是地址，但我无法使用上面的代码找到它。如果下一个带有 validate 类的元素直接在没有 clearfix 的当前元素之后，它可以工作：

   <div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
                    <label for="mi">Middle Initial:</label>
                    <input type="mi" field="MI" type="text" class="form-control input-sm validate" />
                </div>
                <div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
                        <label for="last">Last Name:</label>
                        <input type="last" field="LastName" type="text" class="form-control validate" />
                </div>

我从 Firstname 中跳出，我可以找到输入 Middle Initial 就好了。无论它位于 DOM 树上的什么位置，我如何获得具有类 validate 的下一个元素？

谢谢

Answer 1

保持它与元素无关，您可以使用index() 方法获取具有相同类的所有元素中元素的索引，然后将其推进。

var $allValidateElements = $('.validate').on('focus', function(e){
  var myIndex = $allValidateElements.index(e.target);
  var nextIndex = ++myIndex;
  
  $allValidateElements.removeClass('red-border');
  $allValidateElements.eq(nextIndex).addClass('red-border');
});

.red-border {
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
  <label for="first">First Name:</label>
  <input type="first" field="FirstName" type="text" class="form-control validate" />
</div>
<div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
  <label for="mi">Middle Initial:</label>
  <input type="mi" field="MI" type="text" class="form-control input-sm validate" />
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
  <label for="last">Last Name:</label>
  <input type="last" field="LastName" type="text" class="form-control validate" />
</div>
<div class="clearfix"></div>

<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
  <label for="address">Address:</label>
  <input type="address" field="Address" type="text" class="form-control input-lg validate" />
</div>