В чем разница между .closest() и .parents('selector')?

Question

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

<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> метка.

Answer 1

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

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

Answer 2

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

Re ваш оригинальный Вопрос о 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 с два divs в нем, «внутренние» и «оберточные» элементы управления (в указанном порядке).
• $(this).closest('div') - объект jQuery с один div в нем «внутренний».

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

• $(this).parent('span') - Пустой объект jQuery, родительский span это не span.
• $(this).parents('span') - Пустой объект jQuery, span не имеет предка spanс.
• $(this).closest('span') - объект jQuery с span это было нажато.

Answer 3

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

Пример (выбор из нижнего генеракодицетагкода, div= Соответствующие элементы):

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

.