클릭 한 요소를 기준으로 요소를 어떻게 타겟팅 할 수 있습니까?

Question

아래와 같은 HTML 구조가 주어지면 ul에있는 p을 클릭하면 ul 옆의 div.selected에 .css("background", "yellow")이 수행되기를 기대합니다.

<ul> 
    <li> 
     <p>Hello</p> 
     <p>Hello</p> 
    </li> 
</ul> 

<div>Hello Again</div> 
<div class="selected">Hello Again</div> 
<div><span>And Again</span></div> 

<ul> 
    <li> 
     <p>Hello</p> 
     <p>Hello</p> 
    </li> 
</ul> 


<div>Hello Again</div> 
<div class="selected">Hello Again</div> 
<div><span>And Again</span></div> 

지금까지 내가 가지고있는 것;

그것은 다음과 같이 JS에서 CSS를 분리하는 CSS 클래스를 추가하는 것이 좋습니다

$("p").next("div .selected").css("background", "yellow"); 

Answer 1

당신이 필요합니다 :

$('ul').on('click', 'p', function() { 
    $(this).closest('ul').nextAll('div.selected:first').css('background', 'yellow'); 
}); 

on()는 jQuery를 1.7에 도입, 그래서 당신은 이전 버전을 사용하는 경우, 시도되었다;

$('ul p').bind('click', function() { 
    $(this).closest('ul').nextAll('div.selected:first').css('background', 'yellow'); 
}); 

이벤트 처리기를 클릭에 추가하려면 event method을 사용해야합니다. on(), closest() (셀렉터와 일치하는 첫 번째 조상을 선택), nextAll() (셀렉터와 일치하는 다음 형제를 선택하며 다음 요소 선택 만 고려한 next()에 해당)을 참조하십시오.

Answer 2

 
$("p").next("div .selected").addClass("selected"); 

Answer 3

:

$('div.selected').addClass('className'); 

Answer 4

왜 CSS를

아래

.selected{ 
     bacground-color:yellow; 
} 

또는를 추가하지 마십시오 시도해 볼 수 있습니다

$("p").parents('ul').siblings("div.selected").css("background-color", "Red") 

(210)