开发者社区> 问答> 正文

JavaScript 如何遍历输出以下结构

本人项目的需求是:页面上同一个div 下有若干标签。我想把该div下标题标签(h标签)的内容,按照从上至下的顺序遍历出来。求高人指点一二,非常谢谢!(使用原生JS,不借助jQuery 等其他JS库)
待遍历的结构:

<div id="container">
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h4>标题4</h4>
    <h1>标题1</h1>
    <h3>标题3</h3>
</div>

需要遍历后为以下结构:

<ul>
    <li class="h1">标题1</li>
    <li class="h2">标题2</li>
    <li class="h4">标题4</li>
    <li class="h1">标题1</li>
    <li class="h3">标题3</li>
</ul>

展开
收起
a123456678 2016-03-11 09:34:41 1576 0
1 条回答
写回答
取消 提交回答
  • 首先把h$元素选取出来:

    var container = document.querySelector('#container');
    var headings = container.querySelectorAll('h1, h2, h3, h4, h5, h6');
    然后迭代、拼接:
    
    var len = headings.length,
        ul = document.createElement('ul'),
        ulHtmlStr = '';
    for (var i = 0; i < len; i++) {
        var heading = headings[i];
        ulHtmlStr += '<li class="' + heading.tagName.toLowerCase() + '">' + heading.textContent + '</li>';
    }
    ul.innerHTML = ulHtmlStr;
    2019-07-17 18:58:22
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载