Traversing


 <body>
        <div>
            <h1>hola</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>tres</li>
            </ul>
        </div>
        <div>
            <h1>adios</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>cuatro</li>
                <li>cinco</li>
                <li>seis</li>
            </ul>
        </div>
        <div>
            <h1>hola</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>tres</li>
            </ul>
        </div>
        <script>
            $(function () {
                $('li').click(function () {
                    //Cambio el color del elemento clicado a rojo
                    $(this).css("color", "red");
                    //Cambio el color de los hermanos a azul
                    $(this).siblings().css("color", "blue");
                    //Cambiar el color del hermano del padre h1
                    $(this).parent().siblings("h1").css("color", "green");
                    //Cambiar el color de los otros li's a gris
                    $(this).parents("div").siblings().find("li").css("color", "grey");
                    //Cambiar el color de los otros h1 a negro
                    $(this).parents("div").siblings().find("h1").css("color", "black");
                    
                });
            });
        </script>
    </body>