jquery遍历以查找父级的父级

Question

HTML:

<li class="comment">
<div class="p_comm">
 <div class="avatar"><img src="/img/1.jpg"></div>
 <div class="c_auth">author<a class="del" title="delete it!" rel="19">x</a></div>
 <div class="c_cont w">what ever</div>
 <div class="c_time">12-23 13:22:15</div>
</div>
</li>

I want to find the parent li relative to the <a> in this section. I can't find a function to do this. I've tried prev(),parentsUntil() none of them can do this. Currently i have to use $(this).parent().parent().parent() to reach <li> . Is there a function to find parent <li> directly?

Answer 1

You may use closest() . Try this:

$(this).closest("li.comment");

Answer 2

或这个：

$(this).parents('li');

Answer 3

var p = $('.del').parents('li');
console.log(p);

http://jsfiddle.net/hZY8R/

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

As you can see, when you use parents with a selector, you will be fine.

Answer 4

You should use closest() which will traverse up the DOM until it finds the element you're after:

$('a').closest('li');

If you were doing this the other way around (ie you had the li and wanted to find the a ) you would use:

$('li').find('a');

Answer 5

.parent() by itself just refers to the immediate ancestor of a node, but you can also do:

var li = $('a.del').parents('li.comment');

to have JQuery go back up the DOM tree until it finds a matching ancestor node. In this case, li will point at the a 's li ancestor.

---

edit: forgot that .parent() only goes up one level, while .parents() goes up the entire tree. Both accept a selector argument, however.

Answer 6

$("a.del").click(function() {
    alert($(this).closest("li").attr("class"))
 })

Answer 7

Use the following code:

$(function(){
    $("a").click(function(){
        $(this).parents("li").hide();
    })
})

http://jsfiddle.net/4yCux/1/