Jquery[제이쿼리] eq(),:lt(),:gt() 인덱스 번호로 요소찾기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] eq(),:lt(),:gt() 인덱스 번호로 요소를 찾아보겠습니다.

이렇게 준비해 보았습니다.

실행하면 이렇게 나오면 된답니다.

===============================
$('li:lt(4)').css('background','blue').css('color','white');
===============================

<li>태그의 css background를 blue로 color를 white로 바꾼다는 뜻입니다.
여기서 lt(4)가 보이실텐데요.
인덱스번호 4보다 작은 <li>태그의  css를 변경하는 소스입니다.
※:lt()는 지정된 숫자보다 인덱스 번호가 작은 요소들을 리턴하는 셀렉터입니다.

<li>태그가 7개가 있는데요. 여기서 순서대로
0 1 2 3 4 5 6 이렇게 인덱스 번호가 적용된답니다.
===============================
인덱스 번호: 0 >>  <li>안녕하세요.!</li>
인덱스 번호: 1 >>  <li>제이쿼리공장장</li>
인덱스 번호: 2 >>  <li>주니주니입니다.</li>
인덱스 번호: 3 >>  <li>오늘은 인덱스</li>
인덱스 번호: 4 >>  <li>번호를 이용하여</li>
인덱스 번호: 5 >>  <li>요소를 찾아보도록하겠습니다.</li>
인덱스 번호: 6 >>  <li>.eq() , :lt() , :gt()</li> 
===============================

실행을 하면 인덱스번호 4보다작은 <li>태그의 css가 변경된모습입니다.

===============================
$('li').eq(0).css('background','black').css('color','white');
===============================
인덱스번호 0번인 <li>태그의  css를 변경하는 소스입니다.
※eq()란 인덱스 번호에 해당하는 요소를 리턴하는 메서드입니다.

인덱스번호 0번인 <li>태그의 css가 변경된모습입니다.

인덱스번호 3보다 큰 <li>태그의  css를 변경하는 소스입니다.
※:gt()는 지정된 숫자보다 인덱스 번호가 큰 요소드를 리턴하는 셀렉터입니다.

인덱스번호 3번보다 큰 <li>태그의 css가 변경된모습입니다.
오늘은 제이쿼리[jquery] eq(),:lt(),:gt() 인덱스 번호로 요소를 찾아보았습니다.
그럼 다음에 또만나요~