JavaScript (또는, jQuery)로 각 요소 앞에 색인번호 붙이려면?
본문
https://codepen.io/sinbi/pen/VwbqOae
<div id="hz">
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
</div>
HTML 요소가 위와 같을 경우,
JS (또는, jQuery) 이용해 앞에 순번 추가하려면 ?
(즉, 아래처럼 나오게....)
1번째 H2
2번째 H2
3번째 H2
4번째 H2
5번째 H2
답변 2
$("#hz h2").each(function(i) {
$(this).text((i + 1) + $(this).text());
});
감사합니다. 아주 잘 작동하네요.
이상하게 공부해도 저는 응용력이 안 생기네요.ㅡㅡ;;;
h2 { list-style-type:decimal;
display: list-item;
list-style-position: inside;}
이런 건 어떨까요?
오~ CSS로 이런 방법도 있군요. 감사합니다.
아쉽게 질문이 JS/JQUERY 이용 방식이라 채택은..^^;;
javascript 필요했던 기능을
css만으로 할 수 있는 것들이 많이 생겼더라구요.
그래서 굳이 javascript 없는 방법은 어떨까 해서 생각해 봤습니다.
그렇잖아도 counter() 함수란 게 있길래 요걸 써먹었는데,
엑스엠엘 님 응용력에 감탄했습니다. ㅎ
CSS 공부 많이 했는데, 왜 응용력이 안 생기는건지...참.ㅡㅡ;;;
별말씀을요.
그런데 궁금한 것이
번호를 매기실 거라면,
<ol 대신 왜 <h2를 쓰셨을까 하는 겁니다.
글 본문에 <h2> 사용한 소제목이 여럿이라,
이것들 앞에 번호를 붙이면 어떨까 고민하다..
정말 딱 맞는 거는
https://css-tricks.com/almanac/properties/c/counter-increment/
이거였네요.
헐, 따끈따끈 신선합 팁이네요.
고이 모셔놔야 겠습니다. ㅎㅎ
언제 써먹을지 모르니.....
감사합니다. ( ^ _______ ^ ) ==b