Доброго дня. Небольшая заметка о том, как можно получить родителя элемента по его порядковому номеру в дереве родителей.

В jquery есть несколько способов получения родителей элементов :parent, parents, closest

parent - возвращает прямого родителя, это один элемент, как параметр может получать селектор. Тогда метод возвращает родителя только если родительский селектор совпадает с тем, что подается в качестве параметра.

Для примера, будем препарировать такой синтетический кусок HTML

<div>
	<strong>
		<span>
			<div id="id1">1</div>
		</span>
	</strong>
</div>

для начала без параметра

alert($('#id1').parent()[0].tagName)// вернет span, все ок

все работает, теперь так 

alert($('#id1').parent('div')[0].tagName)// вернет undefined, совпадений нет

метод parents - как понятно из названия вытягивает всех родителей элемента, опять же если задан селектор то только тех родителей, чьи данные подходят под этот селектор

alert($('#id1').parents()[0].tagName)// вернет span

собственно для чего писалась заметка, обратиться к n-ому родителю можно так

alert($('#id1').parents()[2].tagName)// вернет div

что эквивалентно 

alert($('#id1').parent().parent().parent()[0].tagName)// вернет div

однако индекс массива не очень подходит для этих целей, так как мы привыкли работать с jquery объектами поэтому делаем так

alert($('#id1').parents().eq(2).html())// вернет все содержимое корневого div

удобней чем писать кучу parent().parent().parent()

Однако при задании селектора, нужно помнить, что индекс элементов изменится

alert($('#id1').parents('div').eq(0).html())// вернет все содержимое корневого div

closest  отличается от  parents тем, что возвращает лишь один элемент, а обход начинается не с родителя, а с самого себя

alert($('#id1').closest('div').html())// вернет все содержимое самого элемента, эквивалентно $('div#id1').html() 

а вызов closest без параметра, возвращает сам элемент, если Вам нужен именно второй div, используйте parents('div').eq(0), как описано выше

Замечу, все же, что jquery так устроен, что  

alert($('#id1').parents('div').html())//тоже вернет все содержимое корневого div

однако, так делать не следует.

Желаю удачи

Рассказать друзьям

Добавить комментарий


Защитный код
Обновить

Комментарии   

0
Anton
# Anton 30.09.2012 19:26
И почему так делать не стоит?
0
Leroy
# Leroy 30.09.2012 23:17
потому-что запрашиваете вы несколько элементов а значение берете только из первого, представте что у вас есть форма с кучей input а в своем скрипте вы делаете так alert($('input').val()), вроде работает, но вернее будет все же брать руками первое значение
0
аноним
# аноним 28.07.2015 13:56
это не JS
0
аноним
# аноним 28.07.2015 13:57
это не js а jq