如何重置每个容器元素的自动编号标题的计数？答案

【问题标题】：How do I reset the count of auto-numbered headings for each container element?如何重置每个容器元素的自动编号标题的计数？
【发布时间】：2019-06-15 05:55:35
【问题描述】：

我正在使用以下代码从 H4 元素中创建一个有序列表：

$(function() {
    $(".numbered > h4").each(function(i, n) {
      $(this).prepend("<span>" + (i+1) + ". " + "</span> ");
    });
  });

这很好用，但我希望为每个容器（.numbered）重置计数。例如，我有一个包含四个 h4 的容器 div，此代码将添加该数字，但不会为每个 div 重置。所以页面上的第二个 div 将从 5 而不是 1 开始计数。1 是所需的结果。

【问题讨论】：

标签： javascript jquery each

【解决方案1】：

如果您希望 i 为每个 numbered 重新开始，请拆分查找，以便每个执行两个。

$(function() {
    $(".numbered").each(function(_, numbered){
        $('> h4', numbered).each(function(i) {
            $(this).prepend("<span>" + (i+1) + ". " + "</span> ");
        });
    });
});

【讨论】：

【解决方案2】：

您需要遍历每个 .numbered 元素，然后在该循环中遍历每个 h4 元素。类似这样：


$(function() {
    $(".numbered").each(function(i, n) {
        $(n).children("h4").each(function(i,n) {
            $(this).prepend("<span>" + (i+1) + ". " + "</span> ");
        });
    });
  });

【讨论】：

我将另一个解决方案标记为正确，但您的解决方案也有效。谢谢！