jQuery: How to get to a particular child of a parent?

Question

To give a simplified example, I've got the following block repeated on the page lots of times (it's dynamically generated): ```

My link

``` When clicked, I can get to the parent of the link with: ``` $(".mylink").click(function() { $(this).parents(".box").fadeOut("fast"); }); ``` However... I need to get to the `

` of that particular parent. Basically, can someone tell me how to refer to a higher-level sibling without being able to refer to it directly? Let's call it big brother. A direct reference to the big brother's class name would cause every instance of that element on the page to fade out - which is not the desired effect. I've tried: ``` parents(".box .something1") ... no luck. parents(".box > .something1") ... no luck. siblings() ... no luck. ``` Anyone? Thanks.

Accepted Answer

Calling `.parents(".box .something1")` will return all parent elements that match the selector `.box .something`. In other words, it will return parent elements that are `.something1` and are inside of `.box`.

You need to get the children of the closest parent, like this:

```
$(this).closest('.box').children('.something1')
```

This code calls `.closest` to get the innermost parent matching a selector, then calls `.children` on that parent element to find the uncle you're looking for.

jQuery: How to get to a particular child of a parent?

Solution

Problem