6

我正在根据标题结构以有序列表的样式制作目录，例如：

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

变成：

  • 洛雷姆
    • ipsum
    • 忧郁
      • 坐
    • 亚美特

这就是我目前的做法：

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

哪个有效，但似乎缺乏优雅。有没有更聪明/更快/更健壮的方法来做到这一点？

4

2 回答 2

2

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

也许有人会派上用场））

于 2016-05-12T13:47:40.560 回答
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
于 2013-07-14T15:29:29.803 回答