javascript - 如何遍历特定 div 标签中的所有标题标签?
问题描述
如何遍历特定 div 标签中的所有标题标签?我正在尝试自动为我的 div 标签中的所有内容创建一个文档映射树,并将其放置在侧边栏菜单中...如果有一个易于使用的 javascript 库...我也想要这种方法,因为那样我就不会了不需要编写任何javascript代码...
$( document ).ready( readyFn );
function readyFn( jQuery ) {
//alert("hey!");
var docmap = $("#docmap");
var body = $("#body");
docmap.append('<br>Some new content!');
var all = body.getElementsByTagName("h1, h2, h3, h4, h5, h6");
for (var i=0, max=all.length; i < max; i++) {
docmap.append(all[i].innerHtml);
}
}
#docmap {
background-color: #f0f0f0;
height: 100%;
width: 200px;
position: fixed;
}
#main {
margin-left: 200px;
position: 200px;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="docmap">
<ul>
<li> hello
<li> hi
<li> howdy
</ul>
</div>
<div id="main">
<h1>header1</h1>
<h2>header2 a</h2>
<h2>header2 b</h2>
<h1>header1 a</h1>
</div>
解决方案
用于find
获取元素,然后遍历它们。
$( document ).ready( readyFn );
function readyFn( $ ) {
var docmap = $("#docmap");
var body = $("#body");
docmap.append('<br>Some new content!');
var all = body.find("h1, h2, h3, h4, h5, h6");
all.each(function(){
docmap.append(this.innerHTML);
});
}
#docmap {
background-color: #f0f0f0;
height: 100%;
width: 200px;
position: fixed;
}
#main {
margin-left: 200px;
position: 200px;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="docmap">
<ul>
<li> hello
<li> hi
<li> howdy
</ul>
</div>
<div id="main">
<h1>header1</h1>
<h2>header2 a</h2>
<h2>header2 b</h2>
<h1>header1 a</h1>
</div>
推荐阅读
- javascript - 保存价值的深度解构
- c++ - 在 C++ 编程中编写一个函数 ASTERISK
- reactjs - 使用 azure 进行身份验证并重定向到电容器后的混合应用程序加载问题
- design-patterns - 为社交网络应用程序构建活动和通知流
- linux - 查找不包含文件的深度为 1 的子目录
- python - 如何在 3-d 图中对齐原点?
- visual-studio - 在 Visual Studio 中显示未删节的测试参数输入值
- r - 如何根据 R 中 2 个不同表的信息获取比例表
- vb.net - 通过参数从线程更新 UI 元素
- mysql - 数据库太大 - 存储为一行或序列化数据?