CODEWITHSUNDEEP
javascripthtmljqueryparent
DEVianVisuals
DEVianVisuals

Reputation: 11

How to select the parent elements?

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

Upvotes: 0

Views: 90

Answers (1)

jcubic
jcubic

Reputation: 66490

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>

Upvotes: 1

Related Questions