jQuery中的遍历与插件（$.each()的使用场景）--2019年5月23日

$.each()可以对数组、，json和dom结构等进行遍历，以下利用$.each()做一个三级联动的下拉选择

实例

<script src="../static/js/jquery-3.4.1.js"></script>
<script>
    $(function(){

        $.getJSON('inc/11.json',function(returnData){
            let userOpt = '<option value="">选择(名称)</option>';					
            $.each(returnData,function(index){ 
                userOpt += '<option value="'+returnData[index].partsId+'">'+returnData[index].partsName+'</option>'; 
	    }
	);
	$('#parts').html(userOpt);					
	});

	// 填充***下拉列表,并设置change事件方法
	$('#parts').change(function(){
	    //查看当前选择中元素内容					
	    $.getJSON('inc/12.json',function(returnData){
		let userOpt = '<option value="">选择(***)</option>';
		$.each(returnData,function(index){
		//判断当前***所属的名称id是否与前一个名称id相等
		    if (returnData[index].partsId === parseInt($('#parts').val())) {
			userOpt += '<option value="'+returnData[index].brandId+'">'+returnData[index].brandName+'</option>';
			}
		});
		$('#brand').html(userOpt);
	    });
	});

        // 设置下一个下拉列表中对应的内容
        $('#brand').change(function(){
	    //查看当前选择中元素内容
            $.getJSON('inc/13.json',function(returnData){							
                let userOpt = '<option value="">选择(型号)</option>';
		$.each(returnData,function(index){
		    if (returnData[index].brandId === parseInt($('#brand').val())) {
			userOpt += '<option value="'+returnData[index].productId+'">'+returnData[index].productName+'</option>';
			}							
		});
		$('#model').html(userOpt);
            });
        });
    });
</script>

 

 

$.each(arr,function(index,val)   //function包含两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值

比如数组arr=['aa','bb','cc','dd']，利用遍历输出所有内容

$.each(arr,function(index,val) { console.log(index+" : "+val);}

结果如下：

0 : aa

1 : bb

2 : cc

3 : dd