Как мне сбросить количество автонумерованных заголовков для каждого элемента контейнера?

Question

Я использую следующий код для создания упорядоченного списка из элементов H4:

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

Это прекрасно работает, но я хочу, чтобы счетчик сбрасывался для каждого контейнера (.numbered). Например, у меня есть контейнер div с четырьмя h4, и этот код будет предшествовать этому числу, но не сбрасывается для каждого div. Таким образом, второй элемент div на странице будет начинаться с 5 вместо 1. 1 - желаемый результат.

Answer 1

Если вы хотите, чтобы i начинался заново для каждого numbered, разбейте поиск, чтобы выполнить два из них.

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

Answer 2

Вам нужно будет пройти через каждый элемент .numbered, а затем внутри этого цикла пройти через каждый элемент h4.Похоже на это:

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