В чем разница между .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() только поднимается на один уровень, а closest() включает в себя текущий элемент и всех родителей.

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

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

Answer 3

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

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

Re обновленному вопрос о parents (множественное число) против closest: Есть два отличия:

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

2. Независимо от того, прекращается ли поиск с первым совпадением (это делается с closest, это не с parents).

От Вашего оригинальный вопрос:

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

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

С вашего обновленный вопрос:

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

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

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

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