next()가있는 jQuery 계층 구조 문제

Question

image와 div 태그가 모두 단락의 하위 인 경우 $("img").next().hide();이 작동하지 않습니다.

<p> 
<img src="image.jpg" /> 
<div>text</div> // this div is set to 'display: none' by default in css 
</p> 

그러나, 나는 <span>

<p> 
<img src="image.jpg" /> 
<span>text</span> 
</p> 

와 <div>를 대체 할 경우, 또는 나는

<img src="image.jpg" /> 
<div>text</div> 

JQuery와 선택이 제대로 작동 않는 <p> 태그를 생략합니다. 왜 이것이 사실일까요? 인라인 및 블록 표시와 관련이 있습니까? 맨 위로 코드 예제에서 설명한대로 어떻게 작동하게 할 수 있습니까?

이

는 jQuery 코드 내가 사용하고 있습니다 : 당신의 도움에 대한

$(document).ready(function(){ 
    $("img").hover(
     function() 
     { 
      $(this).next().show(); 
     }, 
     function() 
     { 
      $(this).next().hide(); 
     } 
    ); 
}); 

감사합니다!

Answer 1

은 하위 요소로 inline-level elements 만 허용합니다. 이것이 첫 번째 예가 효과가없는 이유입니다.

Answer 2

인라인 엘라멘트 (P) 내부에 블록 요소 (DIV)를 사용하지 마십시오. 대신 P와 같은 클래스 세트로 DIV를 사용하십시오.