使用jQuery将标头(< h1> - < h6>标签)解析为有序列表 [英] Parse header (<h1> -- <h6> tags) to ordered list, using jQuery?
本文介绍了使用jQuery将标头(< h1> - < h6>标签)解析为有序列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我以一个有序列表的样式,基于头结构创建一个内容表,例如:
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屋!
-
查看全文