javascript - 如何迭代特定 div 标签中的所有标题标签?

标签 javascript jquery html

如何迭代特定 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 - 如何迭代特定 div 标签中的所有标题标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60059274/

相关文章:

javascript - 尝试关闭弹出窗口并重新加载其父页面

javascript - 在 Javascript 中扩展关联数组的成本?

javascript - Javascript 如何处理将 setInterval() 分配给变量?

html - 锁定垂直滚动

html - 在 bootstrap 4 beta 中,如何右对齐最后一个导航项?

javascript - 如何让动画无限循环运行

javascript - 如何在表单中应用 checkValidity()?

javascript - 从下拉列表中选择不同类型的值打开不同类型的输入法?

javascript - 在 Javascript 中复制具有不同名称的 HTML 文件(及其内容)

html - 浏览器调整大小时文本溢出