按类查找下一个元素（可能不是同级）jquery

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>

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

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

我的jquery代码中未定义我的元素。因此，当我从输入的LastName中取出制表符时，我想要的下一个元素是Address，但我用上面的代码找不到它。如果下一个带有类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中提取标签，我可以找到输入的中间首字母。如何使用类validate获取下一个元素，而不管它位于DOM树上的何处

---

感谢

保持元素不可知，您可以使用index方法在具有相同类的所有元素中获取元素的索引，然后将其前进

var$allValidateElements=$'.validate'.on'focus'，function e{ var myIndex=$allValidateElements.indexe.target； var-nextIndex=++myIndex； $allValidateElements.removeClass'red-border'； $allValidateElements.eqnextIndex.addClass'red-border'； }; .红边{ 边框颜色：红色； } 名字： 中间字首： 姓氏： 地址:

---

@TylerRoper-我看了一下，这就是我发布代码的地方。只是更改了类名。它不起作用。它确实起作用：。还要注意，您在HTML中复制了一些类型属性。我把那些从桌子上拿走了fiddle@RoryMcCrossan-谢谢你的帮助。这正是我需要的。我调整了代码以输出所需的内容。非常感谢：

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