제이쿼리 $(this)를 쓸 경우 인접셀렉터는 어떻게 코딩하나요? 채택완료
</p>
<p><script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> " target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </a> <style type="text/css">
dl{
width:300px;
margin:50px auto;
}
dl dt{
background:#7CADB6;
cursor:pointer;
}
dl dd{
border:1px solid #7CADB6;
height:250px;
margin:0;
}</p>
<p> </style>
<script type="text/javascript">
$(function(){
$('dt').on('click',function(){
if($(this)+$('dd').css('display')=='block'){
$(this)+$('dd:not(:animated)').slideUp('slow');
}else{
$(this)+$('dd').slideDown('slow');
}
});
});
</script>
</head>
<body>
<dl>
<dt>슬라이딩 효과로 표시상태를 변경한다</dt>
<dd>
slideDown()/slideUp()는 show()/hide() 와는 다른 슬라이딩 애니메이션 효과로
표시/비표시를 변경하는 명령입니다.</p>
<p> </dd>
</dl>
<dl>
<dt>슬라이딩 효과로 표시상태를 변경한다</dt>
<dd>
slideDown()/slideUp()는 show()/hide() 와는 다른 슬라이딩 애니메이션 효과로
표시/비표시를 변경하는 명령입니다.</p>
<p> </dd>
</dl>
</body>
</html></p>
<p>
위 소스입니다.
dt를 클릭하면 dd가 slideDown/slideUp 하는 것을 작동시키는 연습인데요..-.-;;
처음에는
각 dt에다가 id or class를 줘서 각각을 클릭하면 각각의 dd가 slideDown/slideUp 하도록 작동은 됩니다.
그런데,
dt/dd가 여러개일 경우에는 그만큼 각각의 dt에다가 id or class를 주는 것이 비효율적이고
번거롭잖아요..-.-;;
그래서,
$(this)를 이용해서 한방에 만들려고 하는데요..
위 소스를 보시면
여기서 $(this)는 클릭한 각각의 dt 입니다.
그런데, dd는 자손셀렉터가 아니라 인접셀렉터인데요..
이 경우,
css에서는 인접셀렉터는 '+'기호를 이용합니다..
그런데, 지금까지 공부한 제이쿼리에서 셀렉터에는
인접셀렉터라면
가령,
$('h1+p') 이렇게 하면 되는데..
$(this)의 경우,
$(this+p) <<<== 이렇게 하는 것은 없고,,
$(this)+$('p') <<<== 이렇게 하는 것도 없고,,
이처럼
$(this)를 사용할 경우 인접셀렉터는 어떻게 해야하나요..? -.-;;;
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
6년 전
$("p", $(this).parent())
이렇게 하시면 this의 부모에서 p를 찾게됩니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택