jQuery - 선택자 :eq() 인덱스 사용자 지정 선택기

2022. 3. 7. 23:40

▶ eq() 선택자

💻 예제 설명

eq(index) 선택자는 index 부분에 숫자를 넣어서 숫자가 의미하는 해당 태그를 선택하려고 할 때 사용한다.

eq 선택자를 이용하여 리스트 목록에 li 태그를 선택하는 예제이다.

두 개의 ul 태그의 그룹을 만들어서 eq 선택자로 선택한 리스트 목록을 border 표시로

어떤 것이 선택이 되었는지 확인하는 테스트를 진행해보자.

Syntax

숫자(index) 부분의 범위는 0번부터

$(':eq(index)')

🖥 소스 예제

1 - 1) 일반적인 Syntax

  // 일반적인 사용법
  $('접근하려는요소:eq('+숫자+')');

1 - 2) 예제

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <style>
/
  </style>
  
  <script>
    $(document).ready(function(){
      $('#ul-grp-1 li:eq('+0+')').css({'border':'1px solid #000'});
      $('#ul-grp-1 li:eq('+3+')').css({'border':'2px solid red'});
      $('#ul-grp-1 li:eq('+7+')').css({'border':'3px solid green'});
      
      $('#ul-grp-2 li:eq('+2+')').css({'border':'5px solid pink'});
      $('#ul-grp-2 li:eq('+5+')').css({'border':'5px solid blue'});
      $('#ul-grp-2 li:eq('+10+')').css({'border':'5px solid #32a4a8'});
    });
  </script>
</head>
<body>
  <div>
    <h1>1번 그룹</h1>
    <ul id="ul-grp-1">
      <li><a href="#">그룹1 - 0번 자리</a></li>
      <li><a href="#">그룹1 - 1번 자리</a></li>
      <li><a href="#">그룹1 - 2번 자리</a></li>
      <li><a href="#">그룹1 - 3번 자리</a></li>
      <li><a href="#">그룹1 - 4번 자리</a></li>
      <li><a href="#">그룹1 - 5번 자리</a></li>
      <li><a href="#">그룹1 - 6번 자리</a></li>
      <li><a href="#">그룹1 - 7번 자리</a></li>
      <li><a href="#">그룹1 - 8번 자리</a></li>
      <li><a href="#">그룹1 - 9번 자리</a></li>
      <li><a href="#">그룹1 - 10번 자리</a></li>
      <li><a href="#">그룹1 - 11번 자리</a></li>
      <li><a href="#">그룹1 - 12번 자리</a></li>
      <li><a href="#">그룹1 - 13번 자리</a></li>
      <li><a href="#">그룹1 - 14번 자리</a></li>  
    </ul>
    
    <hr>
    
    <h1>2번 그룹</h1>
    <ul id="ul-grp-2">
      <li><a href="#">그룹2 - 0번 자리</a></li>
      <li><a href="#">그룹2 - 1번 자리</a></li>
      <li><a href="#">그룹2 - 2번 자리</a></li>
      <li><a href="#">그룹2 - 3번 자리</a></li>
      <li><a href="#">그룹2 - 4번 자리</a></li>
      <li><a href="#">그룹2 - 5번 자리</a></li>
      <li><a href="#">그룹2 - 6번 자리</a></li>
      <li><a href="#">그룹2 - 7번 자리</a></li>
      <li><a href="#">그룹2 - 8번 자리</a></li>
      <li><a href="#">그룹2 - 9번 자리</a></li>
      <li><a href="#">그룹2 - 10번 자리</a></li>
      <li><a href="#">그룹2 - 11번 자리</a></li>
      <li><a href="#">그룹2 - 12번 자리</a></li>
      <li><a href="#">그룹2 - 13번 자리</a></li>
      <li><a href="#">그룹2 - 14번 자리</a></li>  
    </ul>    
  </div>
</body>
</html>

💻 예제 구동 설명

위 예제 소스 중 eq 선태자 부분만 보자면

  // 1번그룹
  $('#ul-grp-1 li:eq('+0+')').css({'border':'1px solid #000'});
  $('#ul-grp-1 li:eq('+3+')').css({'border':'2px solid red'});
  $('#ul-grp-1 li:eq('+7+')').css({'border':'3px solid green'});

  // 2번 그룹
  $('#ul-grp-2 li:eq('+2+')').css({'border':'5px solid pink'});
  $('#ul-grp-2 li:eq('+5+')').css({'border':'5px solid blue'});
  $('#ul-grp-2 li:eq('+10+')').css({'border':'5px solid #32a4a8'});

1번 그룹의 eq 선택자를 봐보자.

첫 번째 줄 0번 인덱스,

두 번째 줄 3번 인덱스,

세 번째 줄 7번 인덱스,

각각 CSS설정을 border로 줘서 식별이 가능하게 했다.

결과 이미지에 나온 것처럼 0번 인덱스는 그룹 1 - 0번 자리 선택이 되었다는 것을 알 수 있다.

2번 그룹의 eq 선택자를 봐보자.

첫 번째 줄 2번 인덱스

두 번째 줄 5번 인덱스

세 번째 줄 10번 인덱스

이것도 1번 그룹과 마찬가지로 식별 가능하게 border를 설정했다.

결과 이미지에 나온 것처럼 10번 인덱스는 그룹 2 - 10번 자리 선택이 되었다는 것을 알 수 있다.

저작자표시 비영리 변경금지 (새창열림)

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - 셀렉터(selector) 선택자 (기본, 계층별 요소선택) (0)	2022.03.11
jQuery - 태그 삽입, 태그 넣기 tag insert (0)	2022.03.10
jQuery - 키보드 키 어떤 키가 눌렸는지 확인하는 방법 (0)	2022.03.06
jQuery - 정의한 CSS 클래스 토글 이벤트 (0)	2022.03.06
jQuery - 버튼에 호버(hover) 효과 이벤트, 적용하기 (0)	2022.03.06

열공의 기록