Чтобы сделать красивый ol нумерованный список, часто приходится использовать css — счетчики. И все бы хорошо, но вот для сложных списков, где список иногда нужно «разрывать» другим контентом и продолжать уже новым списком, но отсчет пунктов чтобы шел с нужной нам цифры. Вот пример:
Как видите, сначала у нас идет 3 пункта первого нумерованного списка, потом список заканчивается, идет обычный ul список, а потом опять нумерованный, но уже с 4 пункта, а не с 1, как было бы при обычном использовании.
К сожалению, CSS — счетчики не понимают атрибута «start» и ведут отсчет всегда с единицы, если не указано другое число в самом css. Победить эту проблему можно. Привожу сначала CSS-код для нумерованного списка, нас в нем интересует запуск и идентификатор счетчика.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .post ol { margin: 0; padding: 0; list-style-type: none; margin-bottom: 20px; } .post ol li { counter-increment: step-counter; margin-bottom: 6px; } .post ol li::before { content: counter(step-counter); margin-right: 5px; font-size: 80%; background-color: #57ad68; color: white; font-weight: bold; padding: 3px 8px; border-radius: 3px; } |
Ваш код может и будет отличаться, но вам нужно узреть тут идентификатор
1 | step-counter |
От него и будем плясать в нашем jQuery-скрипте на 3 строчке:
1 2 3 4 5 6 7 | $('ol[start]').each(function() { var val = parseFloat($(this).attr("start")) - 1; $(this).css('counter-increment','step-counter '+ val); }); |
Теперь наши списки понимают такой полезный атрибут как Старт и работают отлично.
