How to select the parent elements?

Question

I am trying to make a sidebar that stores the last click link into the local storage and still opens the collapse links after the page reloads.

$(".clickedLink").parent().parent().css('background-color', 'green');

Could someone help me how to select elements?

Example: If I click the "PHP Advanced" link it will select the #5 & #6, also the #1 & #2. But not selecting the #3 & #4...

<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
    <ul>
        <li>
            <a class="nav-link" aria-expanded="false">HTML</a> __#3__
            <div class="collapse"> __#4__
                <ul>
                    <li><a href="../html/html-basic.php" class="nav-link">HTML Basic</a></li>
                    <li><a href="../html/html-advanced.php" class="nav-link">HTML Advanced</a></li>
                    <li><a href="../html/html-examples.php" class="nav-link">HTML Examples</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a class="nav-link" aria-expanded="false">PHP</a> __#5__
            <div class="collapse"> __#6__
                <ul>
                    <li><a href="../php/php-basic.php" class="nav-link">PHP Basic</a></li>
                    <li><a href="../php/php-advanced.php" class="nav-link clickedLink">PHP Advanced</a></li>
                    <li><a href="../php/php-examples.php" class="nav-link">PHP Examples</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

I would appreciate it if anyone can help me out

Answer 1

You can do something like this. call parents('.collapse') to get all parents with given class. Then call prev() to get the links.

 $('a').click(function() { var parents = $(this).parents('.collapse'); parents.css('border-top', '1px solid red'); parents.prev().css('border-top', '1px solid blue'); return false; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="nav-link" aria-expanded="false">Programming</a> __#1__ <div class="collapse"> __#2__ <ul> <li> <a class="nav-link" aria-expanded="false">HTML</a> __#3__ <div class="collapse"> __#4__ <ul> <li><a href="../html/html-basic.php" class="nav-link">HTML Basic</a></li> <li><a href="../html/html-advanced.php" class="nav-link">HTML Advanced</a></li> <li><a href="../html/html-examples.php" class="nav-link">HTML Examples</a></li> </ul> </div> </li> <li> <a class="nav-link" aria-expanded="false">PHP</a> __#5__ <div class="collapse"> __#6__ <ul> <li><a href="../php/php-basic.php" class="nav-link">PHP Basic</a></li> <li><a href="../php/php-advanced.php" class="nav-link clickedLink">PHP Advanced</a></li> <li><a href="../php/php-examples.php" class="nav-link">PHP Examples</a></li> </ul> </div> </li> </ul> </div>