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

Я столкнулся с реакцией, которую сегодня не мог объяснить, работая с каким-то очень простым 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>

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

Ответы

Ответ 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');

Ответ 2

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

Ответ 3

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

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

$('.ObjectContainer .Object:first')

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