В чем разница между .closest () и .parents («селектор»)? - PullRequest
Новая
       36

В чем разница между .closest () и .parents («селектор»)?

13 голосов
/ 23 января 2012

Какая разница между ними?Один эффективнее другого?Я немного запутался, почему они оба существуют.Скажем, у меня есть эта разметка: 

<table>
    <tr>
        <td>...</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
    <tr>
        <td>...</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
    <tr>
        <td>..</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
</table>

Из тегов <span> я могу использовать либо $(this).closest('tr'); или $(this).parents('tr'); для доступа к родительскому / ближайшему тегу <tr>.

Ответы [ 3 ]

18 голосов
/ 23 января 2012

(Примечание: вопрос был отредактирован на следующий день после того, как его спросили, изменив вопрос примерно с parent на примерно parents [обратите внимание на множественное число]. Какой это имеет значение!)

Ваш оригинальный вопрос о parent (в единственном числе) против closest: parent поднимается только на один уровень вверх. closest начинается с текущего элемента (не только родителя) и продолжает поиск по предкам, пока не найдет совпадение (или не закончит предков).

Ваш обновленный вопрос о parents (множественное число) против closest: есть два различия:

  1. Рассматривается ли текущий элемент (это с closest, это не с parents).

  2. Завершается ли поиск при первом совпадении (для closest, для parents).

Из вашего оригинала вопроса:

Из тегов я мог использовать либо $ (this) .closest ('tr'); или $ (this) .parent ('tr');

Нет, вообще-то. $(this).parent('tr'); вернет пустой объект jQuery, потому что родительский элемент span не соответствует селектору.

Из вашего обновленного вопроса:

Из тегов я мог использовать либо $ (this) .closest ('tr'); или $ (this) .parents ('tr');

Вы можете при условии , что ваш tr также не входит в другой tr (например, таблица, содержащая таблицу). Если это так, вы получите тот же результат. Но если у вас есть таблица в таблице, с parents вы получите несколько tr с ( все элементов-предков tr).

Рассмотрим эту структуру: 

<div class="wrapper">
  <div class="inner">
    <p>Testing <span>1 2 3</span></p>
  </div>
</div>

Если мы подключим click к span, это то, что мы получим от трех соответствующих методов:

  • $(this).parent('div') - Пустой объект jQuery, родительский элемент span не является div.
  • $(this).parents('div') - объект jQuery с двумя div s, div "inner" и "wrapper" (в этом порядке).
  • $(this).closest('div') - объект jQuery с one div, внутренним.

Вот результат, если мы подключим click к span и используем span в качестве селектора:

  • $(this).parent('span') - Пустой объект jQuery, родительский элемент span не является span.
  • $(this).parents('span') - Пустой объект jQuery, у span нет предка span s.
  • $(this).closest('span') - объект jQuery с span, по которому щелкнули.
5 голосов
/ 23 января 2012

parent возвращает непосредственных родителей (по одному для каждого элемента в объекте вызывающего) или ничего, если родитель не соответствует селектору. closest возвращает ближайшего предка, сопоставляющего предка для каждого элемента (который может быть исходным элементом). Третья аналогичная функция, parents, возвращает всех соответствующих предков (не включая сам элемент).

Как правило, closest более устойчив к рефакторингу HTML-кода, чем parent, если вы выбираете селектор разумно.

1 голос
/ 23 января 2012

.parent() поднимается только на один уровень вверх, в то время как closest() включает текущий элемент и всех его родителей.

Пример (выбор снизу div, x = соответствующие элементы): 

             parent()  parent('body')   .closest('div')  .parents('div')
body     
   div                                                       x
      div       x        <nothing>                           x
this-->   div                                x
...