解析頭（ <h1> - <h6> 標簽）到有序列表，使用jQuery？

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

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;
});

也許有人會派上用場））

Answer 2

這是我的方式：

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