HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery sibling methods compared</title>

</head>

<body>

  <h3>.next()</h3>

  <ul id="next-demo">

    <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>



  <h3>.nextAll()</h3>

  <ul id="nextall-demo">

    <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>



  <h3>.siblings()</h3>

  <ul id="siblings-demo">

    <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>



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

  <script>

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

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

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

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

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