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

Question

The의 차이점은 무엇입니까? 우주 그리고 > 선택기? 그리고 아마도 관련하여, 다른 무언가의 직접적인 아이 인 것을 어떻게 찾아 내고 자손 라인을 낮추지 않습니까?

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");

클래스 "blah"를 1 2와 3에 추가하는 반면 :

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

모든 목록 요소에 클래스 "blah"를 추가하십시오.

<and with <and? 운영자.

Answer 2

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

공간은 "모든 후손"을 의미하지만, 그 어린이의 직접적인 아이들과 자녀는 선택 될 수 있습니다.

jQuery가 같은 컨벤션을 사용합니다.

Answer 3

이미 언급했듯이 공간은 자손을 선택하는 반면 > 직계 자녀 만 선택합니다. 손자 나 증손자 만 선택하려면 다음을 사용할 수 있습니다.

#foo > * > * > .bar

( "bar"가있는 클래스 "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>