코드랩 레퍼런스
.index() 본문
Definition
- .index() 메서드는 이벤트가 발생한 요소의 인덱스 값을 반환합니다
Syntax
$(selector).index();
$(selector).index(selector);
$(selector).index(element);
$(selector).index(selector);
$(selector).index(element);
Compatibility
 |
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| .index() |
Sample1 index를 이용해 li를 선택하는 예제입니다.
필터링(Filtering) : 글을 클릭하여 인덱스를 확인합니다.
- .eq() : 인덱스 번호에 해당하는 요소를 찾습니다.
- .filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
- .first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.
- .has() : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.
- .is() : 문서 객체의 특징을 판별합니다.
- .last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.
- .map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.
- .not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.
- .slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.
<script type="text/javascript">
$(document).ready(function(){
var btn = $(".list > ul > li"); //각각의 li를 변수에 저장합니다.
btn.click(function(){ //li를 클릭했을 때 이벤트 함수를 설정합니다.
var val = $(this).index(); //li 각각의 index를 타겟을 변수에 저장합니다.
btn.eq(val).find("a").addClass("on"); //인덱스를 숫자를 eq에 적용하여 클래스 on을 추가합니다.
alert("index("+val+")"); //인덱스를 경고창으로 띄웁니다.
});
});
</script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery)</title>
<style>
#ex {padding: 20px; padding-top:0;}
.list li a {color:#666;}
.list li a:hover {text-decoration:none;}
.list li a.on {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border:1px dashed #a51a3d; display:inline-block}
</style>
</head>
<body>
<h3>필터링(Filtering)</h3>
<div class="list">
<ul>
<li><a href="#">.eq() : 인덱스 번호에 해당하는 요소를 찾습니다.</a></li>
<li><a href="#">.filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.</a></li>
<li><a href="#">.first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.</a></li>
<li><a href="#">.has() : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.</a></li>
<li><a href="#">.is() : 문서 객체의 특징을 판별합니다.</a></li>
<li><a href="#">.last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.</a></li>
<li><a href="#">.map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.</a></li>
<li><a href="#">.not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.</a></li>
<li><a href="#">.slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var btn = $(".list > ul > li");
btn.click(function(){
var val = $(this).index();
btn.eq(val).find("a").addClass("on");
alert("index("+val+")");
});
});
</script>
</body>
</html>
Share
Related Articles
more
Ad
Comments