How to select the parent elements?-CodePudding

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  aria-expanded="false">Programming</a> __#1__
<div > __#2__
    <ul>
        <li>
            <a  aria-expanded="false">HTML</a> __#3__
            <div > __#4__
                <ul>
                    <li><a href="../html/html-basic.php" >HTML Basic</a></li>
                    <li><a href="../html/html-advanced.php" >HTML Advanced</a></li>
                    <li><a href="../html/html-examples.php" >HTML Examples</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a  aria-expanded="false">PHP</a> __#5__
            <div > __#6__
                <ul>
                    <li><a href="../php/php-basic.php" >PHP Basic</a></li>
                    <li><a href="../php/php-advanced.php" >PHP Advanced</a></li>
                    <li><a href="../php/php-examples.php" >PHP Examples</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

I would appreciate it if anyone can help me out

CodePudding user response：

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  aria-expanded="false">Programming</a> __#1__
<div > __#2__
    <ul>
        <li>
            <a  aria-expanded="false">HTML</a> __#3__
            <div > __#4__
                <ul>
                    <li><a href="../html/html-basic.php" >HTML Basic</a></li>
                    <li><a href="../html/html-advanced.php" >HTML Advanced</a></li>
                    <li><a href="../html/html-examples.php" >HTML Examples</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a  aria-expanded="false">PHP</a> __#5__
            <div > __#6__
                <ul>
                    <li><a href="../php/php-basic.php" >PHP Basic</a></li>
                    <li><a href="../php/php-advanced.php" >PHP Advanced</a></li>
                    <li><a href="../php/php-examples.php" >PHP Examples</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>