使用jQuery将标头（< h1> - < h6>标签）解析为有序列表 [英] Parse header (<h1> -- <h6> tags) to ordered list, using jQuery?

问题描述

我以一个有序列表的样式，基于头结构创建一个内容表，例如：

I'm making a table of contents, in the style of an ordered list, based on the header structure, such that:

<h1>lorem</h1>
<h2>ipsum</h2>
<h2>dolor</h2>
<h3>sit</h3> 
<h2>amet</h2>

成为：

• lorem
  
  
  
  • ipsum
  
  
  • dolor
    
    
    
    • 
      
    • lorem
      • ipsum
      • dolor
        • sit

        这是我目前的做法：

        $('h1, h2, h3, h4, h5, h6').each ()->
          # get depth from tag name
          depth = +@nodeName[1]
        
          $el = $("<li>").text($(this).text())
          do get_recursive_depth = ()->
            if depth is current_depth
              $list.append $el
            else if depth > current_depth
              $list.append( $("<ol>") ) unless $list.children().last().is('ol')
              $list = $list.children().last()
              current_depth += 1
              get_recursive_depth()
            else if depth < current_depth
              $list = $list.parent()
              current_depth -=1
              get_recursive_depth()
        

        这工作，但它似乎缺乏优雅。是否有更智能/更快/更可靠的方法来执行此操作？

        which works, but it seems like it lacks elegance. Is there a smarter / faster / more robust way to do this?

        推荐答案

        jQuery实现：

        var $el, $list, $parent, last_depth;
        $list = $('ol.result');
        $parent = [];
        $parent[1] = $list;
        last_depth = 1;
        $el = 0;
        $('h1, h2, h3, h4, h5, h6').each(function () {
            var depth;
            depth = +this.nodeName[1];
            if (depth > last_depth) {
                $parent[depth] = $('<ol>').appendTo($el);
            }
            $el = $("<li>").text($(this).text());
            $parent[depth].append($el);
            return last_depth = depth;
        });
        

        也许有人会派上用场））

        Maybe someone will come in handy))

        这篇关于使用jQuery将标头（< h1> - < h6>标签）解析为有序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！