JavaScript 如何遍历输出以下结构-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

JavaScript 如何遍历输出以下结构

a123456678 2016-03-11 09:34:41 1013

本人项目的需求是:页面上同一个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>
JavaScript 前端开发
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 18:58:22

    首先把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;
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程