ansaurus

Question

Answer 1

A:

Try this

$("a").click(function(event){
  [..]
  var $parentEl = $(this).closest('ul');
  alert( $parentEl.attr("id") );
});

And to get the position of the link among it's siblings

$("a").click(function(event){
  [..]
  // returns the 0-based index of the `li` among it's sibling `li`s
  var idx = $(this).parent().prevAll().length;
});

BBonifield 2010-09-28 13:11:03

Brilliant! Thanks! You really gotta know all the functions haha!

Maurice 2010-09-28 13:20:29

Answer 2

A:

I'm going to leave an answer even though you accepted one because the accepted answer doesn't explain the actual issue.

Your code was correct, except for one thing. You were storing the tagName in a variable, and using that to fetch all <ul> elements on the page. If you would have gotten rid of that, your code would work.

$("a").click(function(event){
   var parentEl = $(this).parents('ul').filter(":first");
   alert( parentEl.attr("id") ); // should alert "fourth"
});

A slightly shorter version would be:

$("a").click(function(event){
   var parentEl = $(this).parents('ul:first');
   alert( parentEl.attr("id") ); // should alert "fourth"
});

The .parents() method will return the elements in the order in which they are found, so :first gives you the first one found.

From the docs:

..the elements are returned in order from the closest parent to the outer ones.

You can also use .closest(), but the outcome will be the same.

Also, in order to get its position from among its siblings, there's a much simpler way using jQuery 1.4 or later. You can just call .index(), as in:

var index = $(this).parent().index();

This gives you the position of the <li> from among its siblings.

patrick dw 2010-09-28 13:39:44

ansaurus

tags:

views:

answers:

Can't select direct parent element

related questions