В чем разница между пространством jQuery и селекторами >?

Question

В чем разница между космос и > селекторы?И, возможно, это связано с тем, как я могу искать что-то, что является прямым дочерним элементом чего-то другого, а не ниже по потомковой линии?

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

(все элементы с классом «bar», которые являются правнуками элемента с идентификатором «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>