HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery siblings vs nextAll vs prevAll</title>

</head>

<body>

  <h3>.siblings()</h3>

  <ul id="siblings-demo">

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

  </ul>

  <h3>.nextAll()</h3>

  <ul id="nextall-demo">

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

  </ul>

  <h3>.prevAll()</h3>

  <ul id="prevall-demo">

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

  </ul>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    $("#siblings-demo li.third-item").siblings().css("color", "green");

    $("#nextall-demo li.third-item").nextAll().css("color", "blue");

    $("#prevall-demo li.third-item").prevAll().css("color", "red");

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .siblings() vs .nextAll() vs .prevAll() (Try It)