[Traversing] JQ - eq() 메서드 ★★★ - 선택 요소 중 특정 색인 번호 갖는 요소 반환. (= eq메서드 = 이큐메서드)

1. eq() 예제 - 앞에서부터 색인
2. eq() 정의
3. eq() 구문
4. eq() 예제 - 뒤에서부터 색인
5. eq() 예제 - 앞에서부터 자동 색인

eq() 예제 - 앞에서부터 색인

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("p").eq(1).css("background-color", "yellow");

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>HTML (index 0).</p>

<p>CSS (index 1).</p>

<p>JS (index 2).</p>

<p>JQ (index 3).</p>

 

결과보기 

eq() 정의

 

선택 요소 중 특정 색인 번호 갖는 요소 반환.

 

---

 

1. 

앞부터 색인 : 0부터 시작. (즉, 첫 번째 요소의 색인번호는 0)
뒤부터 색인 : -1부터 시작. (즉, 맨 마지막 요소의 색인번호는 -1)

 

2.

index() 메서드 : 색인번호 반환.

 

eq() 구문

 

$(selector).eq(index)

 

---

[매개변수]

 

index

필수. 요소의 색인 번호. (양수, 음수 모두 가능.)

• 양수: 선택 요소의 앞에서부터 시작. (0부터 시작)
• 음수: 선택 요소의 뒤에서부터 시작. (-1부터 시작)

 

eq() 예제 - 뒤에서부터 색인

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("p").eq(-1).css("background-color", "yellow");

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>HTML (index -4).</p>

<p>CSS (index -3).</p>

<p>JS (index -2).</p>

<p>JQ (index -1).</p>

 

결과보기

eq() 예제 - 앞에서부터 자동 색인

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){

    $("li").click(function(){

        var i = $('li').index(this);

        $("li").eq(i).find("DIV").show();

    });

});
</script>

 

<style>
li div {display:none;}

</style>

 

<div id='' class=''>

    <ul id='' class=''>

        <li class=''>

            <a href='#' target='' title='' class=''>버튼1</a>

            <div class=''>내용1</div>

       </li>

       <li class=''>

            <a href='#' target='' title='' class=''>버튼2</a>

            <div class=''>내용2</div>

        </li>

        <li class=''>

            <a href='#' target='' title='' class=''>버튼3</a>

            <div class=''>내용3</div>

        </li>

    </ul>

</div>

결과보기

관련글 (200618) https://sir.kr/qa/364660