【问题标题】：Automatic Numbering of Headings H1-H6 using jQuery使用 jQuery 对标题 H1-H6 自动编号
【发布时间】：2011-07-04 20:43:15
【问题描述】：

我阅读了related 的帖子，但没有找到针对 IE 的解决方案，所以我请求一个 jQuery 解决方案来解决这个问题：

我有一些像这样的嵌套分层标题

<h1> heading 1</h1> 
<h2> subheading 1</h2>
<h1> heading 2</h1> 
<h2> subheading 1</h2>
<h2> subheading 2</h2>

我需要一些像这样的自动标题输出：

1. heading 1
1.2 subheading 1
2. heading 2
2.1. subheading 1
2.2. subheading 2

有没有办法使用 jQuery 或类似方法在 IE6+ 中工作？

【问题讨论】：

我倾向于假设页面（页面标题）中应该只有一个 h1，这可能与也可能不相关不过你的结构。
@David：我似乎记得这也是 google 所喜欢的，所以这可能是相关的 :) 相应地调整脚本是微不足道的。
@David，这确实符合我之前听到的内容； ......到了一个你已经学会了东西却不记得它来自哪里的年龄，这很奇怪...... :-/

标签： jquery html automation html-heading

【解决方案1】：

这是我的看法：

var segments = [];

$(':header').each(function() { 

  var level = parseInt(this.nodeName.substring(1), 10);

  if(segments.length == level) {
    // from Hn to another Hn, just increment the last segment
    segments[level-1]++;
  } else if(segments.length > level) {
    // from Hn to Hn-x, slice off the last x segments, and increment the last of the remaining
    segments = segments.slice(0, level);
    segments[level-1]++;
  } else if(segments.length < level) {
    // from Hn to Hn+x, (should always be Hn+1, but I'm doing some error checks anyway)
    // add '1' x times.
    for(var i = 0; i < (level-segments.length); i++) {
      segments.push(1);
    }
  }

  $(this).text(segments.join('.') + '. ' + $(this).text());

});

Working example on all levels, H1 - H6

【讨论】：

也感谢您的回答，jeromes 解决方案在我的环境中效果更好。

【解决方案2】：

另一种可能性

var indices = [];

function addIndex() {
  // jQuery will give all the HNs in document order
  jQuery('h1,h2,h3,h4,h5,h6').each(function(i,e) {
      var hIndex = parseInt(this.nodeName.substring(1)) - 1;

      // just found a levelUp event
      if (indices.length - 1 > hIndex) {
        indices= indices.slice(0, hIndex + 1 );
      }

      // just found a levelDown event
      if (indices[hIndex] == undefined) {
         indices[hIndex] = 0;
      }

      // count + 1 at current level
      indices[hIndex]++;

      // display the full position in the hierarchy
      jQuery(this).prepend(indices.join(".")+" "+this.tagName);

  });
}

jQuery(document).ready(function() {
  addIndex();
});

【讨论】：

啊，这也是我要采用的方法 :) 请注意：如果您有类似 1.2.2.3.1. Very deep header 的内容，则可能会紧跟 1.3. Subheader。删除最后一个索引并不总是足够的。
你说得对，我需要解决这个问题。这样它看起来真的像我克隆了你的回答;-)。固定。
谢谢，这给了我最好的结果。 still tricky when the selector scope is restricted to a special area like ("#content h1,#content h2"), but it works!谢谢！
@honestor, h1-h7 可以表示为:header，所以你可以简单地做#content :header。另一种方法是将上下文传递给选择器，在这种情况下，它只会在该范围内搜索：$('h1,h2,h3,h4,h5,h6', $('#content')[0])。请注意，内容参数应该是 DOM 节点，并且不是一个 jQuery 对象。因此[0]。一个简单的document.getElementById('content') 也可以完成这项工作！

【解决方案3】：

老实人，简单来说，只要我们能够获得紧跟在每个 <h1> 标记之后和下一个 <h1> 标记之前的所有 <h2> 标记，问题就会解决，对吧？

这段代码已经成功了，并且工作得很好

$("h1").each(function(mainHeadIndex)
 {
     // Numbering the main heads
     $(this).html(mainHeadIndex +1 +'. ' + $(this).html());

     // Find all the h2 tags right under this particular main head
     $(this).nextUntil("h1").filter("h2").each(function(subIndex)
      {
          // calculate the right sub head number
          var newSubIndex = subIndex+1;
          // Numbering the sub heads
          $(this).html(mainHeadIndex +1 +'.'+ newSubIndex +$(this).html());
      });
  })

you can test it on this link

P.S：谢谢你 MatejB，在你发帖之前我不知道 jsfiddle.com :)

【讨论】：

感谢 David，代码现已更新以匹配您的场景。
这里的另一个增强是将此代码的范围限制为'h1'容器，以不影响任何其他h1s或h2s这页纸。这可以通过使用以下行而不是原始行启动脚本来完成：通过容器的标签名称：'$('divContainer h1')' 或通过容器的 ID：'$('#containerID').find('h1' )'
@Mohammed：不用担心格式。评论降价是答案中的简化版本。您可以在添加评论时单击“帮助”链接以获取格式说明。现在代码更好了，因为它不会在 <p> 标记和类似标记上触发，但您已将范围缩小到 only H1 和 H2。虽然这些是他的示例中唯一的标题，但标题是 H1-H6。我希望他想要像 1.1.2.3.1 这样的东西。很深的副标题
@david：正是，这就是我要找的。我喜欢你的方法，可以定义选择器，但我仍然需要以某种方式覆盖 h3-h6。
@honestor：嗯，我的方法确实涵盖了 h1-h6...？

【解决方案4】：

这对我有用：

变量 i = 0; 变量 j = 0; $('h1').each(函数(索引，元素){ 我++； $(element).text(i + '.' + $(element).text()); j = 1; $(element).nextUntil('h1').each(function(subindex, subelement){ if (!$(this).is('h2')) 返回； // 所以除了 h2 之外的子元素可以单独保留 j++; $(subelement).text(i + '.' + j + '.' + $(subelement).text()); }); });

Woking example on jsfiddle.

【讨论】：

将不是h1 的每个元素都视为子标题。在<h1>header</h1><h2>subheader</h2><p>paragraph 1</p><p>paragraph 2</p> 中，段落将分别以1.2 和1.3 开头。
@honestor 我认为 David Hedlund 给了你最好的解决方案 ;)

【解决方案5】：

我认为您应该将 H2 子标题包装在 DIV 中，然后使用以下代码：

$(文档).ready(函数(){ 变量结果 = 0; $('h1').each(函数(索引) { $(this).text((index + 1) + '.' + $(this).text()); var saveIndexNum = 索引 + 1; $(this).next().find('h2').each(function(index) { $(this).text(saveIndexNum + '.' +(index + 1) + ' ' + $(this).text()); }); }); });

试试这个


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
    var result = 0;
    $('h1').each(function(index) {
        $(this).text((index + 1) + '. ' + $(this).text());
        var saveIndexNum = index + 1;
        $(this).next().find('h2').each(function(index) {
            $(this).text(saveIndexNum + '.' +(index + 1) + ' ' + $(this).text());
        });
    });
});
</script>
<style>
h1
{
     color:red;
}
.subheading h2
{
    color:green;
}
.subheading
{
    background:#e2e2e2;
}
</style>
</head>
<body>
<h1> heading 1</h1> 
<div class="subheading">
    <h2> subheading 1.1</h2>
</div>
<h1> heading 2</h1> 
<div class="subheading">
    <h2> subheading 2.1</h2>
    <h2> subheading 2.2</h2>
    <h2> subheading 2.3</h2>
    <h2> subheading 2.4</h2>
    <h2> subheading 2.5</h2>
</div>
<h1> heading 3</h1> 
<div class="subheading">
    <h2> subheading 3.1</h2>
    <h2> subheading 3.2</h2>
</div>
<h1> heading 4</h1> 
<div class="subheading">
    <h2> subheading 4.1</h2>
    <h2> subheading 4.2</h2>
</div>
</body></html>

【讨论】：