如何用JQ遍历h1,h2,h3生成目录

MOOD 2015-06-09 04:25:46

如何用JQ遍历h1,h2,h3生成目录
8 分钟前提问者悬赏：20分 | iamatig | 分类：数据结构及算法 | 浏览3次

遍历h1,h2,h3生成目录
<div id="BookContent" style="color:#259;">
<div id="1-d1"><h1>第1章</h1></div>
<div id="1-d2"><h2>1.1节</h2></div>
<div id="1-d3"><h3>1.1.1</h3></div>
<div id="1-d4"><h3>1.1.2</h2></div>
<div id="1-d5"><h2>1.2节</h2></div>
<div id="1-d6"><h3>1.2.1</h3></div>
<div id="1-d7"><h3>1.2.2</h3></div>
<div id="1-d8"><h2>1.3节</h2></div>
<div id="1-d9"><h3>1.3.1</h3></div>
<div id="1-d10"><h3>1.3.2</h2></div>
<div id="1-d11"><h1>第2章</h1></div>
<div id="1-d1"><h2>2.1节</h2></div>
<div id="1-d1"><h2>2.2节</h2></div>
<div id="1-d1"><h2>2.3节</h2></div>
<div id="1-d1"><h2>2.4节</h2></div>
<div id="1-d1"><h2>2.5节</h2></div>
<div id="1-d20"><h1>第3章</h1></div>
<div id="1-d21"><h2>2.1节</h2></div>
<div id="1-d25"><h2>2.2节</h2></div>
<div id="1-d28"><h2>2.3节</h2></div>
<div id="1-d30"><h1>第4章</h1></div>
<div id="1-d31"><h2>2.1节</h2></div>
<div id="1-d35"><h2>2.2节</h2></div>
<div id="1-d40"><h1>第5章</h1></div>
<div id="1-d50"><h1>第6章</h1></div>
<div id="1-d60"><h1>第7章</h1></div>
<div id="1-d70"><h1>第8章</h1></div>
</div>
希望结果是：
<ul>
<li>第1章
<ul>
<li>1.1节
<ul>
<li>1.1.1</ok>
<li>1.1.2</ok>
</ul>
</li>
</ul>
</li>
</ul>

...全文

238 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

遥望那些年 2015-06-09

打赏
举报


<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gB2812">
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superplus/js/lib/jquery-1.10.2_d88366fd.js"></script>
<script>
$(document).ready(function(){
	$('body').prepend('<ul id="category" />');
	
	var h1=$('h1');
	var h2=$('h2');
	var h3=$('h3');

	h1.each(function(i,o){
		var idReg=/\d+/;
		var id=$(o).text().match(idReg);
		var li=$('<li>',{'text':$(o).text(), 'id':id})
		li.append('<ul>')
		$('#category').append(li);
	});

	h2.each(function(i,o){
		var parentIdReg=/^\d+/;
		var parentId=$(o).text().match(parentIdReg);
		var idReg=/^\d+\.\d+/;
		var id=$(o).text().match(idReg)[0].replace('.','_');
		var li=$('<li>',{'text':$(o).text(), 'id':id})
		li.append('<ul>')
		$('#'+parentId+' > ul').append(li);
	});

	h3.each(function(i,o){
		var idReg=/^\d+\.\d+/;
		var id=$(o).text().match(idReg)[0].replace('.','_');
		var li=$('<li>',{'text':$(o).text()})
		$('#'+id+' > ul').append(li);
	});
});
</script>
</head>
<body>
<div id="BookContent" style="color:#259;">
    <div id="1-d1"><h1>第1章</h1></div>
    <div id="1-d2"><h2>1.1节</h2></div>
    <div id="1-d3"><h3>1.1.1</h3></div>
    <div id="1-d4"><h3>1.1.2</h2></div>
    <div id="1-d5"><h2>1.2节</h2></div>
    <div id="1-d6"><h3>1.2.1</h3></div>
    <div id="1-d7"><h3>1.2.2</h3></div>
    <div id="1-d8"><h2>1.3节</h2></div>
    <div id="1-d9"><h3>1.3.1</h3></div>    
    <div id="1-d10"><h3>1.3.2</h2></div>    
    <div id="1-d11"><h1>第2章</h1></div>
    <div id="1-d12"><h2>2.1节</h2></div>
    <div id="1-d13"><h2>2.2节</h2></div>
    <div id="1-d14"><h2>2.3节</h2></div>
    <div id="1-d15"><h2>2.4节</h2></div>
    <div id="1-d16"><h2>2.5节</h2></div>
    <div id="1-d20"><h1>第3章</h1></div>
    <div id="1-d21"><h2>3.1节</h2></div>
    <div id="1-d25"><h2>3.2节</h2></div>
    <div id="1-d28"><h2>3.3节</h2></div>
    <div id="1-d30"><h1>第4章</h1></div>
    <div id="1-d31"><h2>4.1节</h2></div>
    <div id="1-d35"><h2>4.2节</h2></div>
    <div id="1-d40"><h1>第5章</h1></div>
    <div id="1-d50"><h1>第6章</h1></div>
    <div id="1-d60"><h1>第7章</h1></div>
    <div id="1-d70"><h1>第8章</h1></div>
</div>
 </body>
</html>

MOOD 2015-06-09