如何为每个容器元素重置 auto-numbered 标题的计数？

Question

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

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

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

Answer 1

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


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

Answer 2

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

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

如何为每个容器元素重置 auto-numbered 标题的计数？

How do I reset the count of auto-numbered headings for each container element?

javascript

each

jquery