nextAll() 可以跳过任何指定的父元素并在父元素中查找唯一的子元素


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

>我有html ajax表单结构,如下所示:

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

如果所有select框彼此相邻,则它正在工作(当第一个选择框被选中时,然后下一个由 ajax 加载相关数据),但出于设计考虑,我需要在所有选择框周围添加<div>,也让它们通过 ajax 下拉选择工作。

现在我正在使用jQuery的函数nextAll当结构发生变化时,这不是一个好的选择。所以任何人都可以指导我如何让它在所有选择框周围div工作?

我目前使用的脚本如下:

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( this );
            });  
            jQuery(this).nextAll('.<?=str_replace(' ','_',$levels[ $i + 1 ])?>_endSelect').load( url, {}, function(responseText) {
                jQuery(this).html(responseText);
                callbackFunc.apply( this );
            });
        } 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( this );
              });
            }
            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);
              });
            }
        }

我不是一个写脚本的人。

使用nextAll().children()它应该有效

解释:

由于 nextAll() 方法返回所选元素的所有下一个同级元素。

现在,如果您向其添加 children() 方法,则 children() 方法将返回所选元素的所有直接子元素。

演示