jquery.summary.js
2011.01.15
指定したセレクタ内の h1...h6 からTOCを生成する。デフォルトでは <div id="summary"></div> 内に生成される。
download
ソース
;(function($){
var namespace = "createSummary";
$.fn[namespace] = function(config) {
var config = $.extend({
where:'#summary'
}, config);
var target = this;
$(config.where).append('<ul></ul>');
var ul = '<ul style="margin-left:2em;"></ul>';
var h = $(target).find('h1, h2, h3, h4, h5, h6');
function getN(ele)
{
ele.nodeName.match(/(\d)/i);
return RegExp.$1;
}
$.each(h, function(i, v)
{
var n = getN(v);
var t = 'h'+n+'-'+i;
var li = '<li>' + '<a href="#' + t + '">' + $(v).text() + '</a>' + '</li>';
$(v).append('<a name="' + t + '"></a>');
if(i <= 0){
$(config.where + " ul:last").append(li);
}
else{
var p_n = getN(h[i-1]); // prev n
if(n < p_n){
$(config.where + " ul:last").parents('ul:last').append(li);
}
else if(n > p_n){
$(config.where + " li:last").append(ul);
$(config.where + " ul:last").append(li);
}
else{
$(config.where + " li:last").after(li);
}
}
});
};
})(jQuery);
var namespace = "createSummary";
$.fn[namespace] = function(config) {
var config = $.extend({
where:'#summary'
}, config);
var target = this;
$(config.where).append('<ul></ul>');
var ul = '<ul style="margin-left:2em;"></ul>';
var h = $(target).find('h1, h2, h3, h4, h5, h6');
function getN(ele)
{
ele.nodeName.match(/(\d)/i);
return RegExp.$1;
}
$.each(h, function(i, v)
{
var n = getN(v);
var t = 'h'+n+'-'+i;
var li = '<li>' + '<a href="#' + t + '">' + $(v).text() + '</a>' + '</li>';
$(v).append('<a name="' + t + '"></a>');
if(i <= 0){
$(config.where + " ul:last").append(li);
}
else{
var p_n = getN(h[i-1]); // prev n
if(n < p_n){
$(config.where + " ul:last").parents('ul:last').append(li);
}
else if(n > p_n){
$(config.where + " li:last").append(ul);
$(config.where + " ul:last").append(li);
}
else{
$(config.where + " li:last").after(li);
}
}
});
};
})(jQuery);
使い方
<html>
<head>
<script type="text/javascript">
jQuery(function($){
// div.entry 内の見出しタグ(h1 ... h6)から div#summary 内にTOCを生成
$("div.entry").createSummary();
});
</script>
</head>
<body>
<div id="summary"></div>
<div class="entry">
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
</div>
</body>
<head>
<script type="text/javascript">
jQuery(function($){
// div.entry 内の見出しタグ(h1 ... h6)から div#summary 内にTOCを生成
$("div.entry").createSummary();
});
</script>
</head>
<body>
<div id="summary"></div>
<div class="entry">
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
</div>
</body>
