Поиск всех элементов лежащих после выбранных

.nextAll()

Осуществляет поиск всех элементов, лежащих после заданных элементов. Метод имеет один вариант использования:

.nextAll([selector]):jQuery1.2

Возвращает все элементы, которые находятся после каждого из выбранных элементов. При необходимости, можно указать селектор selector для фильтрации результата.

Замечание: nextAll ищет нужные элементы, только на общих уровнях дерева DOM с выбранными элементами. То есть, только внутри непосредственных родителей выбранных элементов.

Примеры использования:

$("div").nextAll() вернет элементы, которые находятся после div-элементов на странице.
$("div").nextAll(".bigBlock") вернет элементы класса bigBlock, которые находятся после div-элементов.
$("#lArea").nextAll(".lBlock") вернет элементы класса lBlock, которые находятся после элемента с идентификатором lArea.

В действии

Выясним, какие трапезы идут после обеда (какие элементы идут после элемента с классом lunch):

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    div{
      width: 60px;
      height: 60px;
      float: left;
      padding: 15px;
      margin: 5px;
      background-color: #EEEEEE;
      font-size: 14pt;
    }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="breakfast"~gt~ Завтрак ~lt~/div~gt~
  ~lt~div class="lunch"~gt~ Обед ~lt~/div~gt~
  ~lt~div class="supper"~gt~ Ужин ~lt~/div~gt~
  ~lt~div class="nightEat"~gt~ Ночной перекус~lt~/div~gt~
~lt~script~gt~
    $(".lunch").nextAll().css("border","3px solid red");
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • следующие элементы
  • элементы следующие после выбранных
  • nextAll()
  • .nextAll