jQuery의 공간과> 선택자의 차이점은 무엇입니까?

Question

space과 > 선택자의 차이점은 무엇입니까? 그리고 아마도 관련이 있습니다. 어떻게하면 다른 것의 직접적인 자식이고 후손 줄을 낮추지 않는 것을 찾을 수 있습니까?

Answer 1

경우 : 예를 들면

<ul> 
    <li>Item 1</li> 
    <li>Item 2 
    <ul> 
     <li>Item 2.1</li> 
     <li>Item 2.2</li> 
    </ul> 
    </li> 
    <li>Item 3</li> 
</ul> 

$("ul > li").addClass("blah"); 

는 반면 1 2 3 클래스 'ㅋ'이 추가

$("ul li").addClass("blah"); 

추가 클래스 "ㅋ"리스트의 모든 요소 .

<과 (과) 무슨 관련이 있는지 잘 모르겠습니다. 연산자.

Answer 2

CSS에서 >은 "직접 자식"을 의미합니다. 직접 자식 노드 만 선택됩니다.

"공백"은 "모든 자손"을 의미하지만 직접 자녀 및 그 자녀의 자녀를 선택할 수 있습니다.

jQuery는 동일한 규칙을 사용합니다.

Answer 3

이미 언급했듯이 공간은 임의의 자손을 선택하지만 >은 직접 자식 만 선택합니다.

#foo > * > * > .bar 

(ID가 "foo는"인 요소의 큰 손자입니다 클래스 "바"모든 요소)

Answer 4

: 당신은 손자 나 증손자을 선택합니다, 당신은이를 사용할 수 있습니다 이것 좀 봐 ...

$(".testit > a") //match the first <a> tag below 
$(".testit a") // matches all <a> tag below 

<p class="testit"> 
    <a href="#">All the rules will match this</a> 
    <span> 
    <a href="#">second rule can only select this</a> 
    </span> 
</p>