프로그래밍 공부 일기

2020년 5월 31일 Progate Lv.80

jQuery 객체의 구조

jQuery 오브젝트는 배열과 같은 구조를 하고 있어, 셀렉터에 합치한 요소가 배열과 같이 들어가 있다. 인덱스 번호가 할당되었습니다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

$('li')
=>[
  <li>HTML</li>  //インデックス番号0
  <li>CSS</li>   //インデックス番号1
]

eq 메소드

jQuery 객체 중에서 eq의 인수의 숫자와 같은 인덱스 번호의 요소를 취득할 수 있다. 인덱스 번호는 0부터 시작합니다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
</ul>

$('li') 안의 인덱스 번호가 2 인 jQuery 객체 (세 번째 li 요소)

$('li').eq(2).css('color','red');

index 메소드

특정 인덱스 번호를 얻을 수 있습니다.

<ul>
  <li>HTML</li>
  <li class="active">CSS</li>
  <li>jQuery</li>
</ul>

$('li').index($('.active));

li 요소에서 .active 요소의 인덱스 번호(1)를 가져옵니다.

prev 및 next 메서드

prev 메소드는 jQuery 객체의 형제 요소(같은 계층의 요소) 중에서 1개 전의 요소를, next 메소드는 1개 뒤의 요소를 취득할 수 있다.

<ul>
  <li>HTML</li>
  <li id="center">CSS</li>
  <li>jQuery</li>
</ul>

$('center').prev().css('color','red');
$('center').next().css('color','blue');