JSFiddle - React, Tailwind, and code Playground

by niklasvh

HTML

<ul>
    <li>One</li>

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

  <ul>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>

  </ul>
  <ul>
    <li>Eight</li>
    <li class="hilite">Nine</li>

    <li>Ten</li>
    <li class="hilite">Eleven</li>
  </ul>
  <p>Unique siblings: <b></b></p>

CSS

.hilite{
 background:yellow;   
}

ul{
 float:left;
 display:block;
 border:1px solid #000;   
}

JavaScript

(function( $ ){
  $.fn.uniqueSiblings = function(selector) {
     return $(this).siblings(selector).not(this);
  };
})( jQuery );

var len = $(".hilite").uniqueSiblings()
                          .css("color", "red")
                          .length;
    $("b").text(len);