JSFiddle - React, Tailwind, and code Playground

by Sunny SM

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="subchild"></span>
        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>

JavaScript

/* Selecting an element's direct parent: */
console.log($( "div.parent" ).nextAll().first());
console.log($( "div.parent" ).nextAll().last());
console.log($( "div.surrogateParent1" ).prevAll());
console.log($( "div.surrogateParent2" ).prevAll().first());
console.log($( "div.surrogateParent1" ).prevAll().last());

/*Selecting an element's direct children: */
console.log($( "div.grandparent" ).children( "div" ))

/*siblings */
// Selecting an element's siblings in both directions that matches the given selector:
console.log($( "div.parent" ).siblings());
console.log($("div.surrogateParent2").siblings().eq(0).html());