Javascript & jQuery 실무제작 기초 스터디

4주차 - 요소 찾기 김세환(hidepink@naver.com) / 2014.12.14 (sun)

여러개의 요소들 중에서 순서 찾기

eq(순서)

eq(2) 지정한 순서의 요소를 가져옵니다.

<ul> <li class=“lesson”>영어</li> <li class=“lesson”>수학</li> <li class=“lesson”>과학</li> <li class=“lesson”>문학</li> <li class=“lesson”>국어</li> <ul>

index()

<ul> <li class=“lesson”>영어</li> <li id=“math” class=“lesson”>수학</li> <li class=“lesson”>과학</li> <li class=“lesson”>문학</li> <li class=“lesson”>국어</li> <ul>

var n = $(“.math”).index(); // n == 1 내가 몇번째 순서인지 리턴합니다.

그럼 $(this)는 뭘까요?

$(this)

<ul> <li id=“eng” class=“lesson”>영어</li> <li id=“math” class=“lesson”>수학</li> <li id=“science” class=“lesson”>과학</li> <li id=“literature” class=“lesson”>문학</li> <li id=“korean” class=“lesson”>국어</li> </ul>

$(“.lesson”).click( function(){ alert( $(this).attr(id) )}); http://jsfiddle.net/hidepink/z8b3kyse/

$(this)는… 같은 일을 하는 여러개의 요소들 중에

지금 막 뭔가 일이 일어난 딱 하나의 요소입니다

아래 처럼 마우스오버처럼 만들어진 상태에서 여러 메뉴중 마우스가 딱 저 버튼에 올라갔을때!

$(‘.btns’).mouseover(function(){ $(this).css(‘background’, ‘#ff4500’); });

$(this)는 TGIF STORY 요소를 가리키게 됩니다.

같은 이벤트를 설정한 여러 요소중에서

지금 이벤트가 발생한 요소를 알아낼때 쓰는게

$(this)입니다

this 개념은 프로그래밍에서 이해하기 어려운 개념중에

하나입니다. 차차 익힌다고 생각하세요!