jQuery自动生成页面内导航
遍历HTML标签在生成<ul><li>导航栏
2015年09月01日
遍历HTML标签在生成<ul><li>导航栏
2015年09月01日
function CreateArticleCategory(){
var fatherulID="#rootul";
var fatherLevel=0;
var rootID="#rootul"
var oneID="#";
var twoID="#";
$(".art-title").each(function(index, element) {
var tagName=$(this).get(0).tagName;
if(tagName.substr(0,1)!="H"){ return true;}
if(tagName.substr(1,1)>3){return true;}//只收录前三级标题
var hID="h-"+index.toString();
$(this).attr("id",hID);
var contentH=$(this).html();
var level=parseInt(tagName.substr(1,1));
var liid="li"+index.toString();
var ulid="ul"+index.toString();
var object_a="<a href='#"+hID+"'>"+contentH+"</a>";
var object_li="<li class='li"+tagName.substr(1,1)+"' id='"+liid+"'></li>"
var object_ul="<ul class='nav ul-none' id='"+ulid+"'></ul>";
//获得父级ul的ID是啥 并更新oneID
if(level==1){
fatherulID=rootID;
oneID="#"+ulid;
}else if(level==2){
fatherulID=oneID;
twoID="#"+ulid;
}else if(level==3){
fatherulID=twoID;
}
//在父级ul下加入li 在li下加入a 和 ul
$(fatherulID).append(object_li);
$("#"+liid).append(object_a);
$("#"+liid).append(object_ul);
});
}
$(document).ready(function(){
//生成博文内部目录
CreateArticleCategory();
});//end ready function
在想要生成目录的地方添加一个ul,id="rootul"即可 <div class="col-md-3" role="complementary"> <nav> <ul id="rootul" class="nav bs-docs-sidenav"></ul> <a class="back-to-top" href="#">返回顶部</a> </nav> </div>