CODEWITHSUNDEEP
javascriptjqueryhtml
Hanny
Hanny

Reputation: 682

How to get the parent link of the current clicked link?

I have this HTML Navigation:

            <li class="dropdown">
                <a href="#" class="dropdown-toggle grade-title" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">1st Grado <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#first_grade_anthology" class="nav_pdf_unique_anthology" data-grade="First Grade" data-book-type="Anthology">Antologías</a></li>
                    <!--<li><a href="#first_grade_big_books" class="nav_pdf_list" data-grade="First Grade" data-book-type="Big Books">Big Books</a></li>-->
                    <!--<li><a href="#first_grade_decodable_books" class="nav_pdf_list" data-grade="First Grade" data-book-type="Decodable Books">Decodable Books</a></li>-->
                    <li><a href="#first_grade_a" class="nav_pdf_units" data-grade="First Grade" data-book-type="A">A</a></li>
                    <li><a href="#first_grade_o" class="nav_pdf_units"data-grade="First Grade" data-book-type="O">O</a></li>
                    <li><a href="#first_grade_b" class="nav_pdf_units" data-grade="First Grade" data-book-type="B">B</a></li>
                    <!--<li><a href="#first_grade_trade_books" class="nav_pdf_list" data-grade="First Grade" data-book-type="Trade Books">Trade Books</a></li>-->
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle grade-title" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2nd Grado <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#second_grade_anthology" class="nav_pdf_unique_anthology" data-grade="Second Grade" data-book-type="Anthology">Antologías</a></li>
                    <!--<li><a href="#second_grade_decodable_books" class="nav_pdf_list" data-grade="Second Grade" data-book-type="Decodable Books">Decodable Books</a></li>-->
                    <li><a href="#second_grade_a" class="nav_pdf_units" data-grade="Second Grade" data-book-type="A">A</a></li>
                    <li><a href="#second_grade_o" class="nav_pdf_units" data-grade="Second Grade" data-book-type="O">O</a></li>
                    <li><a href="#second_grade_b" class="nav_pdf_units" data-grade="Second Grade" data-book-type="B">B</a></li>
                    <!--<li><a href="#second_grade_trade_books" class="nav_pdf_list" data-grade="Second Grade" data-book-type="Trade Books">Trade Books</a></li>-->
                </ul>

When a user clicks the dropdown with href = "#", it drops down a menu with all the other links.

What I'm trying to do is get the text of that initial anchor when the user clicks one of the links.

So for example, if they clicked First Grade -> then 'O', I want to get the text 'First Grade'.

What's the best way to accomplish this?

Upvotes: 1

Views: 506

Answers (1)

Rayon
Rayon

Reputation: 36599

.closest() — For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

.find() — Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Use — 

$(this).closest('li.dropdown').find('.grade-title').text();

Upvotes: 4

Related Questions