Задача 1:
— изменить цвет шрифта на #00cc00 полследнему элементу li в списке.
Решение:
Пояснение:
Для решения задачи с помощью фильтра $(‘ul li:last-child’) обращаемся к последнему пункту списка и меняем цвет его шрифта.
Результат:
При загрузке страницы, у последнего элемента li изменится цвет шрифта.
Задача 2:
— изменить фоновый цвет на #00cc00 каждому последнему элементу span, расположенному в блоках div на странице.
Решение:
Пояснение:
Для решения задачи с помощью фильтра $(‘div span:last-child’) обращаемся ко всем последним элементам span, расположенным в блоках div и меняем им фоновый цвет. Следует помнить, что если последним дочерним элементом в блоке окажется не span, то фоновый цвет у элемента изменен не будет. Если последним дочерним элементом в блоке будет текстовый узел, не обрамленный ни в какие теги, а перед ним будет расположен элемент span, то этот элемент будет являться последним дочерним (его фоновый цвет изменится).
Результат:
При загрузке страницы, у всех последних элементов span, расположенных в блоках div, изменится фоновый цвет.
Как выбрать последний дочерний элемент в jQuery?
Просто последний ребенок, а не его потомки.
4 ответа
88 Решение Yoram de Langen [2011-01-06 10:44:00]
Вы также можете сделать это:
28 Philip [2014-03-05 17:28:00]
или если вы хотите, чтобы последние дети с определенным классом комментировали выше.
или конкретный дочерний элемент с определенным классом
Есть ли у вас конкретный сценарий, в котором вам нужна помощь?
0 ScottyG [2017-03-01 19:47:00]
Если вы хотите выбрать последнего ребенка и должны быть конкретными по типу элемента, вы можете использовать селектор last-of-type
В приведенном выше примере как в пункте 4, так и в пункте 5 будет красная рамка, поскольку параграф 5 является последним элементом типа «p» в div, а параграф 4 является последним «пролетом» в div.
Выборка всех элементов, которые являются последними потомком родителя.
version added: 1.1.4 jQuery( «:last-child» )
В то время как :last выбирает один элемент, :last-child выбирает все элементы для каждого родителя.
Пример
Ищем последний span в каждом div-е для добавления подчёркивания и эффекта при состоянии hover.
