목차
- eq() 예제 - 앞에서부터 색인
- eq() 정의
- eq() 구문
- eq() 예제 - 뒤에서부터 색인
- 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
