find next element by class (may not be a sibling) jquery

Question

jquery 3.3.1

I have the following 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>

When i focus into an input field with class validate, I want to find the next field with the class validate. It will not be a sibling of the current elelemnt.

This is my jquery code:

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

        });

If the next element with class validate appears after i do clearfix:

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

my element is undefined in my jquery code. So when i tab out of the input LastName, the next element i want is Address but i cant find it with the above code. If the next element with class validate is directly after the current element without clearfix, it works:

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

I tab out of Firstname and i can find input Middle Initial just fine. How do i get the the next element with class validate regardless of where it is located on the DOM tree?

Thanks

@TylerRoper - i looked at that and that's where i got the code i posted. just changed class names. it didn't work — BoundForGlory, Aug 14 '19 at 15:07
It does work: https://jsfiddle.net/a7sej412/. Also note that you've duplicated some `type` attributes in your HTML. I removed those from the fiddle — Rory McCrossan, Aug 14 '19 at 15:09

score 1 · Accepted Answer · answered Aug 14 '19 at 15:07

Keeping it element agnostic, you can use the index() method to get the index of the element within all the elements with the same class, and then just advance it.

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>

this is exactly what i needed. I tweaked my code to output what i needed. Thanks a ton :) — BoundForGlory, Aug 14 '19 at 15:12

find next element by class (may not be a sibling) jquery

1 Answers1