Доброго дня. Небольшая заметка о том, как можно получить родителя элемента по его порядковому номеру в дереве родителей.
В jquery есть несколько способов получения родителей элементов :parent, parents, closest
parent - возвращает прямого родителя, это один элемент, как параметр может получать селектор. Тогда метод возвращает родителя только если родительский селектор совпадает с тем, что подается в качестве параметра.
Для примера, будем препарировать такой синтетический кусок HTML
1 2 3 4 5 6 7 | <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 |
однако, так делать не следует.
Желаю удачи
Комментарии