$(this) 선택자
이벤트가 발생한 요소를 선택해서 반환
index()인덱스 반환 메서드
이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
$(function () {
$('.menuWrap01 a').on('click', function(e) {
e.preventDefault(); // a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 창이 새고침실행이 되는데 이것을 막아줌
$('.menuWrap01 a').css({backgroundColor: 'white'});
$(this).css({backgroundColor: 'yellow'}); // this - .menuWrap01 a
// 클릭한 a태그만 배경 컬러가 yellow 가 되고 나머지는 배경컬러가 white 가 됨
});
$('.menuWrap02 a').on('click', function(e) {
e.preventDefault();
$('.menuWrap02 a').css({backgroundColor: 'white'});
let idx = $('.menuWrap02 a').index(this); // .menuWrap02의 a태그 요소중 this=click 한 인덱스 값을 반환 idx로 넣어줌
$('.menuWrap02 a').eq(idx).css({backgroundColor: 'cyan'}); // .menuWrap02 a 요소중 idx안 인덱스 값을 선택해 배경색을 cyan으로 변경
$('.idxNum').text(idx); // idx안에 있는 인덱스 값을 text로 반환하여 .idxNum요소에 넣어줌
});
});
</script>
</head>
<body>
<h2>$(this)</h2>
<ul class="menuWrap01">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
<h2>index( )</h2>
<ul class="menuWrap02">
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
<li><a href="#">메뉴6</a></li>
</ul>
<p class="idxNum"></p>
</body>
</html>
