title: Can nextAll() skip any specified parent element and look for only child inside the parent?
body: <p>I have html ajax form structure like below:</p>
  
  <pre><code>&lt;form name="vafForm" id="vafForm" method="GET" action="urlfor ajax"&gt;
      &lt;input type="hidden" value="0" id="vafProduct"&gt;
              &lt;!--&lt;div id="catalog-collection" class="select"&gt;--&gt;
  
          &lt;select class="catSelect {prevLevelsIncluding: 'cat'} cat" name="cat" id="catalog" data-level="0"&gt;
  
              &lt;option value="0"&gt;- Select Cat -&lt;/option&gt;
  
                          &lt;option value="1"&gt;
                  Federal            &lt;/option&gt;
                          &lt;option selected="selected" value="2"&gt;
                  California            &lt;/option&gt;
  
          &lt;/select&gt;
  
          &lt;!--&lt;/div&gt;--&gt;
                  &lt;!--&lt;div id="year-collection" class="select"&gt;--&gt;
  
          &lt;select class="yearSelect {prevLevelsIncluding: 'cat,year'} year" name="year" id="year" data-level="1"&gt;&lt;option value="0"&gt;- Select Year -&lt;/option&gt;&lt;option value="7"&gt;2016&lt;/option&gt;&lt;option value="3"&gt;2012&lt;/option&gt;&lt;/select&gt;
  
          &lt;!--&lt;/div&gt;--&gt;
                  &lt;!--&lt;div id="make-collection" class="select"&gt;--&gt;
  
          &lt;select class="makeSelect {prevLevelsIncluding: 'cat,year,make'} make" name="make" id="make" data-level="2"&gt;&lt;option value="1"&gt;Acura&lt;/option&gt;&lt;/select&gt;
  
          &lt;!--&lt;/div&gt;--&gt;
                  &lt;!--&lt;div id="model-collection" class="select"&gt;--&gt;
  
          &lt;select class="modelSelect {prevLevelsIncluding: 'cat,year,make,model'} model" name="model" id="model" data-level="3"&gt;&lt;option value="2"&gt;Ultra&lt;/option&gt;&lt;/select&gt;
  
          &lt;!--&lt;/div&gt;--&gt;
                  &lt;!--&lt;div id="litre-collection" class="select"&gt;--&gt;
  
          &lt;select class="litreSelect {prevLevelsIncluding: 'cat,year,make,model,litre'} litre" name="litre" id="litre"&gt;&lt;option value="6"&gt;6&lt;/option&gt;&lt;/select&gt;
  
          &lt;!--&lt;/div&gt;--&gt;
                  &lt;div align="center"&gt;
              &lt;input type="button" style=" padding:5px; margin:5px;" value="Clear" class="vafClear"&gt;&lt;input type="button" style=" padding:5px; margin:5px;" class="vafSubmit" value="Submit"&gt;
          &lt;/div&gt;
                &lt;/form&gt;
  </code></pre>
  
  <p>which is working (when first select box is selected, then the next is loaded with relevant data by ajax) if all the <code>select</code> boxes are next to each other, but for design concern I need to add <code>&lt;div&gt;</code> around all select boxes and also let them work by ajax dropdown selection too.</p>
  
  <p>Right now I am using <code>nextAll</code> function of jQuery, which is not a good option when structure changes. So anyone can guide me how to get it working with <code>div</code> around all select boxes ?</p>
  
  <p>The script I am using currently is as below:</p>
  
  <pre><code>if(jQuery('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;_startSelect').size()) {
              var url = getUrl( jQuery(this).parent('form'), '&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;' );
              alert(jQuery('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;_startSelect').val());
              jQuery(this).nextAll('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;_startSelect').html( loadingText );
              jQuery(this).nextAll('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;_endSelect').html( loadingText );
              jQuery(this).nextAll('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;_startSelect').load( url, {}, function(responseText) {
                  jQuery(this).html(responseText);
                  callbackFunc.apply( this );
              });  
              jQuery(this).nextAll('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;_endSelect').load( url, {}, function(responseText) {
                  jQuery(this).html(responseText);
                  callbackFunc.apply( this );
              });
          } else {
              if(jQuery('.&lt;?=str_replace(' ','_',$levels[ $i ])?&gt;Select').val() != "0")
              {
                var url = getUrl( jQuery(this).parent('form'), '&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;' );
                var NewVar = jQuery(this).nextAll('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;Select').html( loadingText );
                jQuery(this).nextAll('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;Select').html( loadingText );
                jQuery(this).nextAll('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;Select').load( url, {}, function(responseText) {
                  jQuery(this).html(responseText);
                  callbackFunc.apply( this );
                });
              }
              else
              {
                //jQuery(this).nextAll('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;Select').html('&lt;option&gt;&lt;/option&gt;').attr('disabled','disabled');
                //jQuery(this).nextAll('.&lt;?=str_replace(' ','_',$levels[ $i + 1 ])?&gt;Select').prop('disabled', true);
                jQuery(this).nextAll('select').each(function() {
                  //jQuery(this).html('&lt;option&gt;&lt;/option&gt;').prop('disabled',true);
                  jQuery(this).prop('disabled',true);
                });
              }
          }
  </code></pre>
  
  <p>I am not much of a scripting guy.</p>