제이쿼리 $(this)를 쓸 경우 인접셀렉터는 어떻게 코딩하나요?
본문
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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;
}
</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() 와는 다른 슬라이딩 애니메이션 효과로
표시/비표시를 변경하는 명령입니다.
</dd>
</dl>
<dl>
<dt>슬라이딩 효과로 표시상태를 변경한다</dt>
<dd>
slideDown()/slideUp()는 show()/hide() 와는 다른 슬라이딩 애니메이션 효과로
표시/비표시를 변경하는 명령입니다.
</dd>
</dl>
</body>
</html>
위 소스입니다.
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)를 사용할 경우 인접셀렉터는 어떻게 해야하나요..? -.-;;;
답변을 작성하시기 전에 로그인 해주세요.
