강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

베니님의 프로필 이미지
베니

작성한 질문수

인터랙티브 웹 개발 제대로 시작하기

DOM 스크립트 2

질문있습니다!

작성

·

171

0

예제 처럼 .characters 에 setAttribute로 data-id 를 적용시켰듯이 만약 탭을 위한 버튼을 만든다고 가정 했을때

<div class="ilbuniBtn">

        <ul class="ilbuniBox">

            <li class="ilbuni a">

                <p>일분이01</p>

            </li>

            <li class="ilbuni b">

                <p>일분이02</p>

            </li>

            <li class="ilbuni c">

                <p>일분이03</p>

            </li>

            <li class="ilbuni d">

                <p>일분이04</p>

            </li>

        </ul>

    </div>

각각의 li의 클래스인 .ilbuni에 data-tab 이라는 명칭과 그 안에 데이터의 값을 증가시켜 넣고 싶은데 그럴 때는 어떻게 하면 되나요?!!

제가 생각했던 방법은 for문으로 돌려 클래스에 개수를 가져오고 그 가져온 개수에 데이터아이디와 값을 증가 시켜 넣으면 되지 않을까 생각했습니다.

const ilbutab = document.querySelectorAll('.ilbuni ');

for( i=0; i < ilbutabl.length; i++ ){

ilbutab.setAttribute("data-tab",  btn[i]);

또는 

ilbutab.setAttribute("data-tab",  i);

}

했더니 에러가 떠서 궁금해서 질문드립니다..!!

 

답변 1

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

for문 안에서

ilbutab[i].setAttribute("data-tab",  i);

또는

ilbutab[i].dataset.tab = i;

이렇게 하시면 됩니다~

만드신 변수 ilbutab은 .ilbuni 클래스를 가진 요소들을 다 가지고 있으므로,
for문 안에서는 인덱스 [i]를 통해 접근하는 거지요~

베니님의 프로필 이미지
베니

작성한 질문수

질문하기