HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .siblings() — multi-list</title>

  <style>

    ul { float: left; margin: 5px; font-size: 16px; font-weight: bold; list-style: none; padding: 0; }

    li { padding: 4px 8px; margin: 2px; border: 1px solid #ccc; }

    p { clear: left; color: blue; margin: 10px 20px; font-weight: bolder; }

    .hilite { background: yellow; }

  </style>

</head>

<body>

  <ul>

    <li>One</li><li>Two</li><li class="hilite">Three</li><li>Four</li>

  </ul>

  <ul>

    <li>Five</li><li class="hilite">Six</li><li>Seven</li>

  </ul>

  <ul>

    <li>Eight</li><li>Nine</li><li class="hilite">Ten</li><li>Eleven</li>

  </ul>

  <p>Unique siblings: <b>0</b></p>

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

  <script>

    var len = $(".hilite").siblings().css("color", "red").length;

    $("b").text(len);

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .siblings() — multi-list count (Try It)