如何遍歷特定 div 標簽中的所有標題標簽？

Question

如何遍歷特定 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>

Answer 1

使用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>