js递归数据处理

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
		</script>
	</head>

	<body>
		<div id="div_menu"></div>
	</body>

</html>
<script type="text/javascript">
	var data = {
		"child": [{
				"id": "M001",
				"name": "一级",
				"href": "#",
				"child": ""
			},
			{
				"id": "M002",
				"name": "一级",
				"href": "#",
				"child": [{
						"id": "M003",
						"name": "二级",
						"href": "#",
						"child": [{
								"id": "M006",
								"name": "三级",
								"href": "#",
								"child": ""
							},
							{
								"id": "M007",
								"name": "三级",
								"href": "#",
								"child": ""
							}
						]
					},
					{
						"id": "M004",
						"name": "二级",
						"href": "#",
						"child": ""
					},
					{
						"id": "M005",
						"name": "二级",
						"href": "#",
						"child": ""
					}
				]
			},
			{
				"id": "M006",
				"name": "一级",
				"href": "#",
				"child": [{
					"id": "M005",
					"name": "二级",
					"href": "#",
					"child": ""
				}]
			}
		]
	};
	$(function() {
		var showlist = $("<ul></ul>");
		showallChild(data.child, showlist);
		$("#div_menu").append(showlist);
	});

	//递归函数
	function showallChild(data_list, parent) {
		for(var datas in data_list) {
			//如果有子节点，则遍历该子节点
			if(data_list[datas].child.length > 0) {

				//逻辑处理
				var li = $("<li></li>");
				$(li).append(data_list[datas].name).append("<ul></ul>").appendTo(parent);

				//递归
				showallChild(data_list[datas].child, $(li).children().eq(0));
			}
			//如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中
			else {

				$("<li></li>").append(data_list[datas].name).appendTo(parent);
			}
		}
	}
</script>
猜你喜欢
