ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ

Добавление содержимого после последнего элемента jquery

У нас есть некий код, после которого, нам нужно поставить, либо текст, либо код будем использовать метод «last()» - его можно использовать двумя способами…

Мы уже рассмотрели несколько тем о том, как добавлять элементы до и после… в общем на момент написания этой страницы уже три темы нами освещены… в общем общая тема : JQUERY

Для тарировки и иллюстрации нам понадобится код с некими повторяющимися классами… один нам нужно будет найти, например последний - класс no1

<ul class="list l1">

<li class="start no1"> Первая строка </li>

<li class="start no2"> Вторая строка </li>

<li class="start no3"> Третья строка </li>

</ul>

<ul class="list l2">

<li class="start no1"> Первая строка второго блока </li>

<li class="start no2"> Вторая строка второго блока </li>

<li class="start no3"> Третья строка второго блока </li>

</ul>

Также нам нужен код, который мы будем устанавливать после найденного последнего элемента…

<li style="color: red;">Тест</li>

И далее у нас есть два варианта совершенно приводящие к одному и тому же результату:

jQuery :last Selector

$(element:last).after
<script>$(".no1:last").after("<li style=\"color: red;\">Тест</li>");</script>

.last() method
$(element).last().after

Соберем...

<script>$(".no1_1").last().after("<li style=\"color: red;\">Тест</li>");</script> </div>

Результат для jQuery :last Selector:

  • Первая строка
  • Вторая строка
  • Третья строка
  • Первая строка второго блока
  • Вторая строка второго блока
  • Третья строка второго блока

И как работает метод...

<div class ="kod"> <ul class="list l1">

<li class="start no1_1"> Первая строка </li>

<li class="start no2"> Вторая строка </li>

<li class="start no3"> Третья строка </li>

</ul>

<ul class="list l2">

<li class="start no1_1"> Первая строка второго блока </li>

<li class="start no2"> Вторая строка второго блока </li>

<li class="start no3"> Третья строка второго блока </li>

</ul>

<script>$(".no1_1").last().after("<li style=\"color: red;\">Тест</li>");</script> </div>

Результат .last() method :

  • Первая строка
  • Вторая строка
  • Третья строка
  • Первая строка второго блока
  • Вторая строка второго блока
  • Третья строка второго блока
Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 40.6
Название скрипта и номер :Добавление содержимого после последнего элемента
Пример - Добавление содержимого после последнего элемента
Скачать - архив
Все скрипты на одной страницеНаписать комментарий.
С вашими куками, что-то не то..., попробуете перезагрузить страницу..