jquery .parents（）

Question

I've got a list and a link, i want to change the top link:

<a class="topLink" href="#">change me</a>

<ul>
    <li><a href="#">link name</a></li>
    <li><a href="#">link name</a></li>
    <li><a href="#">link name</a></li>
    <li><a href="#">link name</a></li>
    <li><a href="#">link name</a></li>
</ul>   

When I click a 'link name' link, I want that text to be applied to the change me link.

How do I do this with jQuery parents? or what should I be using?

Edit: Sorry, I forgot to say that I will have three of these lists, so three links that have a class of topLink

Answer 1

$('ul').delegate('a', 'click', function() {
    $('.topLink').text($(this).text());
});

No need to invoke .parents() here (it wouldn't really work either)

by using .delegate() you can do the job by only binding one event handler to the parent ul element. Of course it would be much better if that ul had an id.

Ref.: .delegate()
Example: Here

Answer 2

$('ul li a').click(function () {
    $(".topLink").html($(this).html());
});

Answer 3

It already has a class, I wouldn't use parents since you would then have to get the parent's sibling (maybe jquery should have an uncle reference??? jk).

Using the class would be:

$('li a').click( function() {
    $('.topLink').text( $(this).text());
}

Answer 4

If the <ul> and the <a> are adjacent siblings, then trythis:

$('ul').delegate('a','click',function() {
    $(this).closest('ul').prev().text( $(this).text() );
});

This uses jQuery's closest() method to get the first <ul> ancestor, and jQuery's .prev() method to traverse from the <ul> to its previous sibling.

If the HTML markup is any different from that which you've provided, then you need to give a sample of your actual HTML.

Answer 5

我更喜欢使用.closest()

Answer 6

the anchor tag you're trying to change isn't in the hierarchy of the LI so the parents() method won't pick it up. Your best bet would be to either select it by id or class and change the html value that way.