jQuery.nextAll()

Метод осуществляет поиск всех родственных элементов после текущего элемента. Полученный результат можно отфильтровать используя выражение передаваемое в качестве аргумента.


Полученный jQuery объект представляет собой набор DOM элементов, метод .nextAll() осуществляет поиск сестринских элементов после указанного выражения и на основе них создаёт новый набор. Метод может принимать в качестве аргумента выражение такое же как и метод $(), если выражение было передано то результат будет отфильтрован по нему.

Принимаемые аргументы .nextAll()

.nextAll( [selector ] ) — в качестве выражения может выступать строка состоящая из css селекторов.

Приминение

Представим что у нас есть простой список:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Перед нами стоит задача поменять задний фон у всех элементов после элемента с классом .third-item. Для этой цели как нельзя лучше подходит метод .nextAll(), составим такое выражение:

$( "li.third-item" ).nextAll().css( "background-color", "red" );

Результатом работы данного кода будет окрашивание заднего фона 4 и 5 элемента в красный цвет. Так как мы не указали никаких аргументов для метода фильтрация элементов не производилась.

Примеры

Пример 1: Задача получить все «div» блоки после первого и присвоить им класс «after»:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>nextAll demo</title>
    <style>
      div {
        width: 80px;
        height: 80px;
        background: #abc;
        border: 2px solid black;
        margin: 10px;
        float: left;
      }
      div.after {
        border-color: red;
      }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>
    <div>first</div>
    <div>
      sibling
      <div>child</div>
    </div>
    <div>sibling</div>
    <div>sibling</div>
    <script>
      $("div:first")
        .nextAll()
        .addClass("after");
    </script>
  </body>
</html>

Пример 2: Найти все параграфы располагающиеся после 2 дочернего элемента тега «body» и присвоить им класс «after»

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>nextAll demo</title>
    <style>
      div,
      p {
        width: 60px;
        height: 60px;
        background: #abc;
        border: 2px solid black;
        margin: 10px;
        float: left;
      }
      .after {
        border-color: red;
      }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>
    <p>p</p>
    <div>div</div>
    <p>p</p>
    <p>p</p>
    <div>div</div>
    <p>p</p>
    <div>div</div>

    <script>
      $(":nth-child(1)")
        .nextAll("p")
        .addClass("after");
    </script>
  </body>
</html>

About the Author: admin

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *