使用jQuery将头文件(<h1> - <h6>标签)解析为有序列表？

Question

我正在根据标题结构制作一个有序列表样式的目录,这样:

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

变为:

• LOREM
  • 存有
  • 悲
    • 坐
  • 阿梅德

这就是我目前正在做的事情:

$('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()

哪个有效,但似乎缺乏优雅.是否有更智能/更快/更强大的方法来做到这一点？

Answer 1

我会这样做：

http://jsfiddle.net/edi9999/cNHPW/

我没有上下遍历 DOM，而是存储每个 h1..h6 标签的父级，并且我知道必须在哪里附加当前 li 元素。$el和last_depth是全局变量（这就是为什么我将这一行放在$el=0函数之外）

$list=$('ol.result')
$parent=[]
$parent[1]=$list
last_depth=1
$el=0

$('h1, h2, h3, h4, h5, h6').each ()->
    # get depth from tag name
    depth = +@nodeName[1]
    if depth>last_depth
        $parent[depth]=$('<ol>').appendTo($el)
    $el = $("<li>").text($(this).text())
    $parent[depth].append $el
    last_depth=depth