Что означает пробел в селекторе jquery?

Question

Я столкнулся с реакцией, которую я не смог объяснить сегодня, работая сегодня с каким-то очень простым Jquery, и я надеялся, что один из вас сможет объяснить мне, что происходит, чтобы привести к этим результатам

Итак, у меня есть модель DOM (здесь упрощенно)

<div class="ObjectContainer">
    <div class="Object">
        <div>stuff</div>
    <div class="Object">
        <div>stuff</div>

Идея заключалась в том, чтобы установить атрибут последнего объекта с помощью этого кода:

$('div.ObjectContainer').find('div.Object :last').attr("index", "1");

Теперь я понимаю, что код здесь был неправильным, и правильный селектор поиска должен быть 'div.Object: last', но это результаты, которые я не понимаю. Когда я выполнил первый код, это произошло:

<div class="ObjectContainer">
    <div class="Object">
        <div index="1">stuff</div>
    <div class="Object">
         <div>stuff</div>

Может ли кто-нибудь объяснить мне, как моему первоначальному селектору удалось установить атрибут на дочернем узле?

Answer 1

Пробелы указывают на совпадение с потомками. Для каждого пространства вы спускаетесь (как минимум) на один уровень и применяете свой селектор к дочерним элементам ранее выбранных элементов.

Например:

div.container.post

Будет соответствовать <div> с классами container и post, в то время как следующее:

div.container .post

... будет сопоставлять любой элемент с классом post, который происходит от <div> с классом container.

Это будет соответствовать <div class="container"><p class="post"></p></div>, но также будет соответствовать любому .post, независимо от того, насколько глубоко оно вложено:

<div class="container">
  <div>
    <div>
      <a class="post"> <!-- matched -->
    </div>
  </div>
</div>

Вы можете думать об этом как о поэтапном совпадении: сначала найдены совпадающие элементы div.container, а затем каждый из этих элементов (и все их подэлементы) ищет совпадения с .post.

В вашем случае div.Object :last сначала находит все теги <div> с классом Object, а затем ищет в каждом из них элементы, соответствующие :last, то есть любой элемент, который является последним элементом в своем контейнере. , Это относится как к <div index="1">stuff</div>, так и к <div>stuff</div>.

Пробелы работают точно так же, как цепочка нескольких вызовов к find, поэтому, если вы понимаете, как это работает, вы можете понять, как пробелы влияют на селектор. Они идентичны:

$('div#post ul.tags li');
$('div#post').find('ul.tags').find('li');

Answer 2

$('div.ObjectContainer').find('div.Object :last') приводит к эффекту подстановки.он ищет любого ребенка с псевдо-классом: last.Таким образом, он просто выбрал div: last.Это эквивалентно $('div.ObjectContainer').find('div.Object div:last')

Answer 3

Используя jQuery, вы можете найти любой объект DOM, указав его идентификатор, имя класса, тип тега и т. Д., Или просто сначала найти родителя, а затем указать нужный вложенный дочерний элемент

Например, вы можете найтипервый Div.Объект по этому запросу

$('.ObjectContainer .Object:first')

Таким образом, пространство в селекторе jQuery разделяет родительский узел и его дочерние элементы