테스트 사이트 - 개발 중인 베타 버전입니다

JavaScript (또는, jQuery)로 각 요소 앞에 색인번호 붙이려면? 채택완료

https://codepen.io/sinbi/pen/VwbqOae

</p>

<p><div id="hz">

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

</div></p>

<p>

 

 

HTML 요소가 위와 같을 경우,

JS (또는, jQuery) 이용해 앞에 순번 추가하려면 ?

(즉, 아래처럼 나오게....)

1번째 H2

2번째 H2

3번째 H2

4번째 H2

5번째 H2

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

</p>

<p>$("#hz h2").each(function(i) {

    $(this).text((i + 1) + $(this).text());

});</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

감사합니다. 아주 잘 작동하네요.
이상하게 공부해도 저는 응용력이 안 생기네요.ㅡㅡ;;;

댓글을 작성하려면 로그인이 필요합니다.

h2 { list-style-type:decimal;     display: list-item; list-style-position: inside;}

이런 건 어떨까요?

로그인 후 평가할 수 있습니다

답변에 대한 댓글 7개

오~ CSS로 이런 방법도 있군요. 감사합니다.
아쉽게 질문이 JS/JQUERY 이용 방식이라 채택은..^^;;
javascript 필요했던 기능을
css만으로 할 수 있는 것들이 많이 생겼더라구요.

그래서 굳이 javascript 없는 방법은 어떨까 해서 생각해 봤습니다.
그렇잖아도 counter() 함수란 게 있길래 요걸 써먹었는데,
엑스엠엘 님 응용력에 감탄했습니다. ㅎ
CSS 공부 많이 했는데, 왜 응용력이 안 생기는건지...참.ㅡㅡ;;;
별말씀을요.
그런데 궁금한 것이
번호를 매기실 거라면,
<ol 대신 왜 <h2를 쓰셨을까 하는 겁니다.
글 본문에 <h2> 사용한 소제목이 여럿이라,
이것들 앞에 번호를 붙이면 어떨까 고민하다..
정말 딱 맞는 거는
https://css-tricks.com/almanac/properties/c/counter-increment/
이거였네요.
헐, 따끈따끈 신선합 팁이네요.
고이 모셔놔야 겠습니다. ㅎㅎ
언제 써먹을지 모르니.....
감사합니다. ( ^ _______ ^ ) ==b

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

전체 질문 목록