댓글 수정
패스워드 :
답변 쓰기
패스워드 :
- 확인을 누르면 댓글이 삭제됩니다 !! -
패스워드 :
등록일 :
작성자 :
급행 제이쿼리(jQuery) 강좌ㆍ강의 - 초급에서 중급까지만 !
[강좌8] 메서드 강좌 1
동등한 관계에서의 이전것 다음것 찾기
next(), prev() 메서드 강좌와 활용

이 강좌에서 처음으로 시작하는 메서드 강좌 입니다.
딱히 순서는 없지만 next 와 prev 메서드로 시작해 보겠습니다.

예제1
제이쿼리 : $('[name=div1]').next()
명령 : 이름이 div1 인것의 다음것을 찾아라.
설명 : 동등한 관계에서의 다음것을 찾으라는 명령입니다. 자식을 찾는 명령이 아닙니다.

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>

next 메서드는 작업시 아주 편리한 메서드 입니다. 굿 이죠. ㅎㅎ



예제2
제이쿼리 : $('div').next()
명령 : div 다음것을 찾아라.
설명 : 약간 심화학습 입니다. div 의 다음것을 찾으라고 하면 무엇을 찾게 될까요?

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>

우선 $('div') 셀렉터로 모든 div 를 찾습니다. 그리고 각 div 별로 다음것을 찾기 때문에 2, 3, 4 의 div 가 찾아진 것이죠.
전부 3개가 찾아져서 반환됩니다.
1은 2를 찾고, 2는 3을 찾고, 3은 4를 찾고, 4는 없네요. (데헷)



예제3
제이쿼리 : $('div:eq(1)').next()
명령 : div 의 두번째것 다음것을 찾아라.
설명 : eq(1) 로 두번째 div 에서 그 다음것을 찾습니다. :eq 는 0 부터 시작한다는것 기억하시죠?
그리고 eq 라는 메서드도 있는데요. $('div:eq(1)').next()$('div').eq(1).next() 은 같습니다.

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>




이번에는 nextAll 메서드 입니다. 뭐하는 녀석인지 느낌이 오시죠?

예제5
제이쿼리 : $('[name=div1]').nextAll()
명령 : 이름이 div1 인것 다음의 것을 찾아라.
설명 : next 에 all 을 붙여 nextall 인 메서드 입니다. 이름 처럼 정직하게 지정한 것 이후의 모든것을 찾습니다.

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>




예제6
제이쿼리 : $('[name=div1]').nextAll('span')
명령 : 이름이 div1 인것 다음의 span 태그 만 찾아라.
설명 : nextAll('셀렉터 문법') 으로 지정한 것만 찾을 수 있습니다. 아.. 역시 사랑스러운 제이쿼리!

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>
<span name="span1">span1</span>
<span name="span2">span2</span>
<span name="span3">span3</span>





자.. 그리고 prev 메서드가 있습니다.
이 메서드는 next 의 반대입니다. 위 예제의 반대라고 생각하면 됩니다.
그래서 예제는 없습니다(!) 괜찮겠죠? ^^;;

next 의 반대 prev() - 이전것 찾기
nextAll 의 반대 prevAll - 이전것 모두찾기

이 메서드는 어렵지 않기 때문에 쉽게 이해 할 수 있습니다.
중요한것은 실전에 응용하는 것인데요. 아래 예제를 보면서 마치겠습니다. ^^
제이쿼리는 어디에 어떻게 잘 쓰느냐가 제일 중요합니다.

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

next 메서드를 활용한 FAQ(자주묻는질문) 만들기 (질문 부분을 클릭해 보세요)

질문 : 올챙이는 뜨거운물에 알을 낳을까요? 찬물에 낳을까요?
답변 : 올챙이는 알 못 낳습니다.
질문 : 전기 밥솥에 물과 쌀을 넣고 취사를 누른후, 전기선을 꼈다 꽂았다 반복하면 밥이될까요?
답변 : 됩니다. 왜냐면.. 꼈다 와 꽂았다는 같은말 ㅋㅋ
질문 : 우주에 존재하는 모든 별의 갯수와, 지구의 모든 인간의 머리카락 수를 곱한 것중 뭐가 많을까요?
답변 : 당연히 우주. 지구에는 대머리가 있으므로 곱하면 0 이 된다 ...
질문 : 흙 500g 과 물 500g 중 어느쪽이 더 무거울까?
답변 : 같다. 둘다 500g 임 (찡긋)
▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

위 예제의 실행가능한 소스

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

위 FAQ는 아주 단순한 예제입니다. FAQ는 구현하기 나름이지만 크게 몇가지 방식이 있습니다.
클릭했을때 답변이 나타나는 방식만 이 설명에 해당됩니다.

1. 클릭한 질문의 아래쪽이 펼쳐지는것 (초간단)
2. 1과 같지만 질문을 다시 클릭하면 답변이 감춰지는것 (좀 귀찮)
3. 2와 같지만 클릭해서 이미 보여진 다른 답변은 감춰지고 현재 클릭한 것만 보여주는 방법
4. 클릭시 펼쳐지는 에니메이션 추가 하기

저는 특별한 요구가 없다면 1 과 같은 방법으로 간단히 만들었습니다.
FAQ에 예술(?)을 할 필요는 없습니다. 간혹.. 있더군요. ㄷㄷ
그냥 보여진 상태로 하자고 하기도 했습니다.
그리고 이런건 제이쿼리로 만들면 간단하지만 직접 만들려면 피곤합니다. 귀찮죠. ^^;


위 예제의 설명입니다.

<div class="q" onclick="$(this).next().show()">질문 : 올챙이는 뜨거운물에 알을 낳을까요? 찬물에 낳을까요?</div>

$(this)
현재 클릭한 "것" 을 의미합니다. this 는 자기 자신을 의미하며 onclick 에 있으므로 클릭된 그것(자신)을 의미합니다.
이걸 제이쿼리 셀렉터에 바로 넣어줍니다. this 도 셀렉터에 들어갈 수 있습니다.

next()
다음것을 찾습니다. 셀렉터에 현재 클릭한 것이 들어왔기 때문에 바로 다음의 답변이 들어있는 div 를 찾게됩니다.
어렵지 않죠? ㅎ

show()
답변이 숨겨져 있는데(display:none;) 보이게 해줍니다. display:block 로 변경해 주는 것이죠.
옵션으로 show(100) 하면 0.1 초동안 에니메이션이 되면서 나타납니다. 1000분의 1초 단위로 입력하면 됩니다.


이 예제에서 next 메서드를 사용한 이유가 있습니다. 이름을 지정해서 만들수도 있지만 그렇게 하지 않은 정말 큰 이유는 !!
복사 + 붙여넣기 작업에 최적화하기 위함입니다. 이름을 지정한다면 반복되는 부분마다 다 바꿔주어야 하는데
이 예제의 방법으로 한다면 그냥 복사만 해주면 됩니다. 이런식으로 만드는게 여러모로 편합니다.

관계를 이용한 접근입니다. ^^*

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

마지막으로 next 와 prev 의 현실적인 이야기

이름을 몰라도 찾을 수 있는 좋은 방법 !! 이라고 간단히 정리해 봅니다.

학창시절을 떠올려 봅시다. 선생님께서 수업시간에 질문을 합니다. 그런데 질문이 어려워서 다들 걸려들지요.
선생님은 학생들의 이름을 몰라도 질문을 마구 던질 수 있습니다.

야! 너 뒤에, 옆에, 뒤에 뒤에, 앞에 이런식으로 말이죠. 공포의 시간이죠..
이런식으로 한명씩 쓰러져 가다가 답변을 하면 끝나게 됩니다.
요즘 체벌은 안된다지만 예전엔 많이 맞았습니다. 그래서 더욱 공포의 시간이었죠.

이런 이야기를 하는 이유는 제이쿼리 셀렉터의 경우도 이렇게 관계로 찾아 나가는게 좋을때가 있습니다.
하지만 좀 어려운 방법이기도 하죠. 처음엔 개념잡기가 어려울 수 있습니다.

결론 : 열심히 배우고 응용해 봅시다.

그럼 이번 강좌는 여기서 마치겠습니다. 감사합니다 ^^&

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :