javascript - Can nextAll() skip any specified parent element and look for only child inside the parent? -


i have html ajax form structure below:

<form name="vafform" id="vafform" method="get" action="urlfor ajax">     <input type="hidden" value="0" id="vafproduct">             <!--<div id="catalog-collection" class="select">-->          <select class="catselect {prevlevelsincluding: 'cat'} cat" name="cat" id="catalog" data-level="0">              <option value="0">- select cat -</option>                          <option value="1">                 federal            </option>                         <option selected="selected" value="2">                 california            </option>          </select>          <!--</div>-->                 <!--<div id="year-collection" class="select">-->          <select class="yearselect {prevlevelsincluding: 'cat,year'} year" name="year" id="year" data-level="1"><option value="0">- select year -</option><option value="7">2016</option><option value="3">2012</option></select>          <!--</div>-->                 <!--<div id="make-collection" class="select">-->          <select class="makeselect {prevlevelsincluding: 'cat,year,make'} make" name="make" id="make" data-level="2"><option value="1">acura</option></select>          <!--</div>-->                 <!--<div id="model-collection" class="select">-->          <select class="modelselect {prevlevelsincluding: 'cat,year,make,model'} model" name="model" id="model" data-level="3"><option value="2">ultra</option></select>          <!--</div>-->                 <!--<div id="litre-collection" class="select">-->          <select class="litreselect {prevlevelsincluding: 'cat,year,make,model,litre'} litre" name="litre" id="litre"><option value="6">6</option></select>          <!--</div>-->                 <div align="center">             <input type="button" style=" padding:5px; margin:5px;" value="clear" class="vafclear"><input type="button" style=" padding:5px; margin:5px;" class="vafsubmit" value="submit">         </div>               </form> 

which working (when first select box selected, next loaded relevant data ajax) if select boxes next each other, design concern need add <div> around select boxes , let them work ajax dropdown selection too.

right using nextall function of jquery, not option when structure changes. can guide me how working div around select boxes ?

the script using below:

if(jquery('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>_startselect').size()) {             var url = geturl( jquery(this).parent('form'), '<?=str_replace(' ','_',$levels[ $i + 1 ])?>' );             alert(jquery('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>_startselect').val());             jquery(this).nextall('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>_startselect').html( loadingtext );             jquery(this).nextall('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>_endselect').html( loadingtext );             jquery(this).nextall('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>_startselect').load( url, {}, function(responsetext) {                 jquery(this).html(responsetext);                 callbackfunc.apply( );             });               jquery(this).nextall('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>_endselect').load( url, {}, function(responsetext) {                 jquery(this).html(responsetext);                 callbackfunc.apply( );             });         } else {             if(jquery('.<?=str_replace(' ','_',$levels[ $i ])?>select').val() != "0")             {               var url = geturl( jquery(this).parent('form'), '<?=str_replace(' ','_',$levels[ $i + 1 ])?>' );               var newvar = jquery(this).nextall('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>select').html( loadingtext );               jquery(this).nextall('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>select').html( loadingtext );               jquery(this).nextall('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>select').load( url, {}, function(responsetext) {                 jquery(this).html(responsetext);                 callbackfunc.apply( );               });             }             else             {               //jquery(this).nextall('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>select').html('<option></option>').attr('disabled','disabled');               //jquery(this).nextall('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>select').prop('disabled', true);               jquery(this).nextall('select').each(function() {                 //jquery(this).html('<option></option>').prop('disabled',true);                 jquery(this).prop('disabled',true);               });             }         } 

i not of scripting guy.

use nextall().children() should work

explaination:

since nextall() method returns next sibling elements of selected element.

now if add children() method , children() method return direct children of selected elements.

demo


Comments

Popular posts from this blog

sql - VB.NET Operand type clash: date is incompatible with int error -

SVG stroke-linecap doesn't work for circles in Firefox? -

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -