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

.eq( index )

· 8년 전 · 1930

.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>

댓글 작성

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

로그인하기

게시글 목록

번호 제목
15854
15853
15852
15851
15849
15848
15847
15843
15842
15841
15840
15839
15838
15837
15836
15835
15834
15833
15832
15831
15830
15829
15828
15826
15825
15824
15823
15822
15821
15820