jQuery: Selecting a link one level up from a lower level link

Question

I'm working with an unordered list of links that has two levels:

   <ul class="level-1">
      <li class="item-a"><a href="#">A</a></li>
      <li class="item-b"><a href="#">B</a>
        <ul class="level-2">
          <li class="item-1"><a href="#">1</a></li>
          <li class="item-2"><a href="#">2</a></li>
          <li class="item-3"><a href="#">3</a></li>
        </ul>
      </li>
      <li class="item-c"><a href="#">C</a></li>
    </ul>

I click one of the .level-2 links, and want to select the higher level link from the list that contains the clicked link. (For example, I click either 1, 2, or 3 - and I want to select B.)

If my clicked link is selected as $(this).find('a') -- how can I select the higher level link?

Would appreciate your advice!

score 3 · Accepted Answer · answered Jul 21 '11 at 05:01

One way would be to go up to the closest <ul>, then up again to the closest <li>, and then back down to the <a>:

$('a').click(function() {
    var $a = $(this).closest('ul').closest('li').find('a:first');
    // $a is the <a> you want.
});

This approach is fairly flexible and not overly dependent on your DOM structure, you'd be able to add things before or after the <a> you want without breaking your code (unless of course you started adding <li>s or <ul>s).

There are certainly other ways to do this but the above is pretty simple and straight forward and that should be your second concern (your first being that it works).

Referenences:

Perfect. Thank you very much @mu is too short! This is exactly what I needed. — Dimitri Vorontzov, Jul 21 '11 at 05:05

FishBasketGordo · Answer 2 · 2011-07-21T05:07:26.343

2

Use a combination of the closest and find functions (API references here and here):

 $(this).closest('ul')
        .closest('li')
        .find('a')
        .text() // Equals B if 1, 2, or 3 are clicked. 
                // Equals '' if A, B, or C are clicked.

Here's a jsFiddle: http://jsfiddle.net/FishBasketGordo/nmunm/

edited Jul 21 '11 at 05:07

answered Jul 21 '11 at 04:58

FishBasketGordo

22,904
4
58
91

Thank you FishBasketGordo. Unfortunately, it didn't work in my case (I think because there is interfering jQuery code that prevents this selector from working), but I appreciate your willingness to help. – Dimitri Vorontzov Jul 21 '11 at 05:05
I was a little hasty. I've clarified my answer above. – FishBasketGordo Jul 21 '11 at 05:08
Yep, that's the kind of solution that I wanted. Thank you! – Dimitri Vorontzov Jul 21 '11 at 05:08

score 1 · Answer 3 · answered Jul 21 '11 at 05:03

1

You can use this:

$(document).ready(function() {
    $("ul.level-2 a").click(function () {
       alert($(this).closest('ul.level-2').parent().find('a').html()); 
    });
});

Look the sample working: http://jsfiddle.net/znHXK/

answered Jul 21 '11 at 05:03

armandomiani

732
6
16

Thanks. This is a great solution, too. – Dimitri Vorontzov Jul 21 '11 at 05:06

score 1 · Answer 4 · answered Jul 21 '11 at 05:16

1

for your reference

$(function(){
    $("a").each(function(){
        $(this).click(function(){
            $(this).css("background-color","red");
            $(this).parents("li").children("a").css("background-color","blue");
        });
    })
})

answered Jul 21 '11 at 05:16

Monday

1,403
12
10

jQuery: Selecting a link one level up from a lower level link

4 Answers4