테스트 사이트 - 개발 중인 베타 버전입니다

.eq( index )

· 8년 전 · 1928

.eq( index )


설명 : 일치하는 요소 세트를 지정된 색인에있는 요소로 줄이십시오.


DOM 요소 집합을 나타내는 jQuery 객체가 주어지면이 .eq()메서드는 해당 집합 내의 한 요소에서 새 jQuery 객체를 생성합니다. 제공된 인덱스는 세트에서이 요소의 위치를 ​​식별합니다.


간단한 목록이있는 페이지를 고려해보십시오.


<ul>

  <li>list item 1</li>

  <li>list item 2</li>

  <li>list item 3</li>

  <li>list item 4</li>

  <li>list item 5</li>

</ul>

이 메소드를 목록 항목 집합에 적용 할 수 있습니다.


$( "li" ).eq( 2 ).css( "background-color", "red" );

이 호출의 결과는 항목 3에 대한 빨간색 배경입니다. 제공된 색인은 0부터 시작하며 DOM 트리가 아닌 jQuery 객체 내의 요소 위치를 나타냅니다.


음수를 제공하면 처음이 아니라 집합의 끝에서 시작하는 위치를 나타냅니다. 예 :


$( "li" ).eq( -2 ).css( "background-color", "red" );

이 시간 목록 항목 4는 세트 끝에서 2이므로 빨간색으로 바뀝니다.


지정된 0 기반 인덱스에서 요소를 찾을 수없는 경우이 메서드는 빈 집합과 length속성 0을 사용 하여 새 jQuery 객체를 생성합니다 .


$( "li" ).eq( 5 ).css( "background-color", "red" );

여기서는 .eq( 5 )다섯 개의 목록 항목 중 여섯 번째 항목을 표시 하므로 목록 항목 중 빨간색으로 표시되지 않은 항목은 없습니다 .


예:

적절한 클래스를 추가하여 인덱스 2 파란색으로 div를 켭니다.


<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>eq demo</title>

  <style>

  div {

    width: 60px;

    height: 60px;

    margin: 10px;

    float: left;

    border: 2px solid blue;

  }

  .blue {

    background: blue;

  }

  </style>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

 

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

 

<script>

$( "body" ).find( "div" ).eq( 2 ).addClass( "blue" );

</script>

 

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
15895
15894
15893
15888
15887
15886
15885
jQuery .end()
15884
15883
jQuery .each()
15882
jQuery .die ()
15881
15880
15878
15877
15876
15874
15873
15872
15871
15866
15865
15864
15863
15862
15861
15859
15858
15857
15856
15855