jquery将包含父子关系的数组对象转换为父子关系并迭代输出

最新推荐文章于 2024-07-08 08:06:20 发布

原创最新推荐文章于 2024-07-08 08:06:20 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

运维手记专栏收录该内容

110 篇文章

订阅专栏

本文提供了一段代码，演示如何在jQuery中处理包含父子关系的数组对象，并使其在不同浏览器环境下，尤其是IE下，能正确进行迭代输出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码仅供参考使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery.js" ></script>
		<title></title>
		<style>		
			.page1{
				font-size: 25px;

			}
						.page2{
				font-size: 20px;

				margin-left: 20px;
			}
						.page3{
				font-size: 18px;
				margin-left: 40px;
			}
						.page4{
				font-size: 14px;
				margin-left: 60px;
			}
						.page5{
				font-size: 12px;
			}
			.billspan{
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div id="content"></div>
		<script>
var data=[
{Show_level: "1", ClassId: "1000000", ParentClassId: "0", Charge_type_Name: "套餐", Charge: "5910"},
{Show_level: "2", ClassId: "1002000", ParentClassId: "1000000", Charge_type_Name: "基本费", Charge: "4900"},
{Show_level: "3", ClassId: "1005000", ParentClassId: "1002000", Charge_type_Name: "功能费", Charge: "4900"},
{Show_level: "2", ClassId: "1002002", ParentClassId: "1000000", Charge_type_Name: "超出费用", Charge: "1010"},
{Show_level: "3", ClassId: "1005002", ParentClassId: "1002002", Charge_type_Name: "彩信费", Charge: "10"},
{Show_level: "4", ClassId: "1009002", ParentClassId: "1005002", Charge_type_Name: "通信费", Charge: "10"},
{Show_level: "3", ClassId: "1005005", ParentClassId: "1002002", Charge_type_Name: "服务费", Charge: "1000"},
{Show_level: "4", ClassId: "1009005", ParentClassId: "1005005", Charge_type_Name: "爱音乐", Charge: "1000"},
]
data.forEach(ele => {
  var parentId = ele.ParentClassId;
  if (parentId=='0') {
  } else {
    //如果ele是子元素的话 ,把ele扔到他的父亲的child数组中.
    data.forEach(d => {
      if (d.ClassId === parentId) {
        var childArray = d.child;
        if (!childArray) {
          childArray = []
        }
        childArray.push(ele);
        d.child = childArray;
      }
    })
  }
});
//去除重复元素
data = data.filter(ele => ele.ParentClassId=='0');
var str='';
getArray(data);
 $("#content").html(str)

function getArray(data)
    {
        for (var i in data) {
        	console.log(data[i].Charge_type_Name)
        	str+='<ul class=page'+data[i].Show_level+'>'+data[i].Charge_type_Name+'<span>￥:'+data[i].Charge+'</span>元</ul>';
            if (data[i].child =='') {
            } else {
                getArray(data[i].child);
            }
        }
    }

		</script>
	</body>
</html>

以上代码在谷歌运行正常但是在IE下不能正常显示修改为一下代码即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery.js" ></script>
		<title></title>
		<style>		
			.page1{
				font-size: 25px;

			}
						.page2{
				font-size: 20px;

				margin-left: 20px;
			}
						.page3{
				font-size: 18px;
				margin-left: 40px;
			}
						.page4{
				font-size: 14px;
				margin-left: 60px;
			}
						.page5{
				font-size: 12px;
			}
			.billspan{
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div id="content"></div>
		<script>
var data=[
{Show_level: "1", ClassId: "1000000", ParentClassId: "0", Charge_type_Name: "套餐", Charge: "5910"},
{Show_level: "2", ClassId: "1002000", ParentClassId: "1000000", Charge_type_Name: "基本费", Charge: "4900"},
{Show_level: "3", ClassId: "1005000", ParentClassId: "1002000", Charge_type_Name: "功能费", Charge: "4900"},
{Show_level: "2", ClassId: "1002002", ParentClassId: "1000000", Charge_type_Name: "超出费用", Charge: "1010"},
{Show_level: "3", ClassId: "1005002", ParentClassId: "1002002", Charge_type_Name: "彩信费", Charge: "10"},
{Show_level: "4", ClassId: "1009002", ParentClassId: "1005002", Charge_type_Name: "通信费", Charge: "10"},
{Show_level: "3", ClassId: "1005005", ParentClassId: "1002002", Charge_type_Name: "服务费", Charge: "1000"},
{Show_level: "4", ClassId: "1009005", ParentClassId: "1005005", Charge_type_Name: "爱音乐", Charge: "1000"},
]

$.each(data, function(index,ele){
	 function parent(ele){
		var parentId = ele.ParentClassId;
		if (parentId=='0') {
  } else {
  	  	$.each(data, function(index,d) {
  		function child(d){
      if (d.ClassId === parentId) {
        var childArray = d.child;
        if (!childArray) {
          childArray = []
        }
        childArray.push(ele);
        d.child = childArray;
      }
    }
  	}) 	
  }		
}	
});

var str='';
getArray(data);
 $("#content").html(str)
function getArray(data)
    {
        for (var i in data) {
        	console.log(data[i].Charge_type_Name)
        	str+='<ul class=page'+data[i].Show_level+'>'+data[i].Charge_type_Name+'<span>￥:'+data[i].Charge+'</span>元</ul>';
            if (data[i].child =='') {
            } else {
                getArray(data[i].child);
            }
        }
    }

		</script>
	</body>
</html>