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

Question

С этой разметкой:

<div id="e">  
    <div id="f"></div>  
</div>

Возвращает ли $('#e > #f') то же, что и $('#e #f')?

Answer 1

Селектор parent> child будет искать только прямые дочерние элементы , тогда как ancestor descendant будет искать любой дочерний элемент.

Например, со следующей разметкой:

<div class="foo">
  <div>
    <div class="bar"></div>
  </div>
</div>

$('.foo > .bar') не найдет элемент .bar, в то время как $('.foo .bar') найдет его, потому что .foo не является прямым потомком от .bar, но является его потомком.

Answer 2

Во-первых, я предполагаю, что вы имели в виду $('#e > #f') и $('#e #f').

В вашем примере они оба вернут одно и то же. Разница в том, что $('#e #f') также возвращает div в этом случае:

<div id="e">
  <div id="g">
    <div id="f"></div>
  </div>
</div>

$('#e > #f'), с другой стороны, ничего бы там не возвращал, поскольку он выбирает только элементы, которые являются прямыми потомками других элементов.

Answer 3

Это не сработает, потому что вы не указываете, какие элементы вы ищете. Вам нужно поставить #e> #f или #e #f, чтобы получить ваши идентификаторы.

Если бы это был реальный сценарий, #e> #f найдет только детей, ничего не вложенных ниже этого. #e #f будет захватывать любые элементы id = "f", независимо от того, насколько далеко они могут быть вложены в вашу структуру.

Answer 4

Да, поскольку в HTML нет элементов e или f, они всегда будут возвращать пустые объекты jQuery.

Вызов $('#e > #f') вернет элемент с id="f", если он является прямым потомком элемента с id="e".

Вызов $('#e #f') вернет элемент с id=f, если он находится где-то внутри элемента с id="e".

Edit:
Примечание. Поскольку вопрос был отредактирован после того, как я ответил, первое предложение не относится к тому, как выглядит вопрос в настоящее время.

Answer 5

В этом примере да, они вернут одно и то же.