Доброго дня. Небольшая заметка о том, как можно получить родителя элемента по его порядковому номеру в дереве родителей.
В 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
однако, так делать не следует.
Желаю удачи
Комментарии