[자바스크립트] js 지정태그 모두 접근하기, each

세 개의 버튼을 누르면 li태그에 각각 접근하는 작업을 해본다.

each( )는 지정된 태그를 반복하여 접근하는 함수다.

 

index 값 출력

태그 선택자로 li태그를 선택한 후 each메소드에 index를 받도록 한다.

그리고 index를 출력하도록 해줬다.

첫 번째 버튼을 누르면 each로 접근한 li태그들의 인덱스를 각각 구해준다.

 

index, item값 출력

이번엔 index뿐 아니라 item까지 매개변수로 받아온 뒤

item의 textcontent를 받아 출력한다.

두 번째 버튼을 누르면 인덱스 값에 li태그안의 text값까지 같이 출력한다.

 

css 변경하기

li태그들을 변수에 저장한 뒤 1번과 마찬가지로 index를 매개변수로 주었다.

each는 반복문 처럼 태그들에 접근하여 각 index가 커질수록 

Pixel변수도 값이 커진다.

eq함수로 각 인덱스의 li태그에 그에 맞는 Pixel값을 주어 테두리두께를 준다.

 

또, 굳이 liList.eq를 써줄 필요없이 this를 사용해 현재 가르키는 태그에 css를 줄 수도 있다.

margin값 또한 index에 맞게 점점 늘어나게 해준다.

 

인덱스가 커질수록 테두리 두께와 태그 간격이 늘어난다.