如何用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>
...全文
237 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
  • 打赏
  • 举报
回复
http://www.cnblogs.com/xdp-gacl/p/3718879.html 搞定了,非常牛逼
MOOD 2015-06-09
  • 打赏
  • 举报
回复
顶一下,我的目的就是自动根据文章里的H标签生成树状目录

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧