코드랩 레퍼런스

.index() 본문

JQUERY

.index()

webstoryboy 2018. 1. 9. 00:20

Definition

  • .index() 메서드는 이벤트가 발생한 요소의 인덱스 값을 반환합니다

Syntax

$(selector).index();
$(selector).index(selector);
$(selector).index(element);

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
.index()
<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

Ad

Comments