109

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

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

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 <div class="something1"> 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.

Keavon
  • 6,837
  • 9
  • 51
  • 79
Tom
  • 30,090
  • 27
  • 90
  • 124
  • Anurag's answer might not seem like the right one -it certainly made me stop and think- but it's pointing out a blatant typo in your code that's causing your selector to fail. The selector, in jQuery, is `.parent()` *not* `.parents()` – David Thomas Mar 08 '10 at 02:29
  • @ricebowl: Wrong. http://api.jquery.com/parents/ – SLaks Mar 08 '10 at 02:30
  • @ricebowl... parent() would give me div something2, so I need parents() to get to div box. – Tom Mar 08 '10 at 02:31
  • Ah; my apologies. Umm...I don't know whether it's best to leave my ignorance on display, or delete the error to avoid upsetting anyone else... =| Still, at least I've learned something useful today; that's the point, right..? =) – David Thomas Mar 08 '10 at 02:36
  • 1
    @ricebowl, no worries, thanks for contributing. – Tom Mar 08 '10 at 02:37
  • Possible duplicate of [How to get the child of an element being dragged with jQuery UI](https://stackoverflow.com/questions/2986532/how-to-get-the-child-of-an-element-being-dragged-with-jquery-ui) – davidawad Jul 26 '17 at 22:08
  • I couldn't have asked this question better. – Robert Nov 25 '17 at 10:44

5 Answers5

164

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.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • I know this is a bit old but isn't it better in this case to use **parent()** rather than **closest()** as I imagine there is more tree traversal with **closest()**? – rmorse Jan 23 '12 at 13:30
  • 1
    @acSlater: He _needs_ tree traversal. `parent()` is the wrong element. – SLaks Jan 23 '12 at 16:29
  • Ah yes it's parent().parent() that Tom needs sorry! :) – rmorse Jan 23 '12 at 17:09
  • 1
    @acSlater: Yes; that would work. However, it makes the Javascript much more coupled to the HTML structure. `.closest(...)` is more resilient, and more readable too. – SLaks Jan 23 '12 at 17:10
  • I was just saying I realised he needed parent->parent, I agree with you closest is best for this scenario – rmorse Jan 23 '12 at 17:14
  • 11
    In case anyone is wondering: after you've found the right parent using .closest(), if you're looking for a child element that is NOT a direct child (but a child of a child, for example), just use .find() in place of .children. – Fabien Snauwaert Jul 14 '14 at 10:28
  • For my code I needed `$(this).closest('.box').prev('.something1')` but this answer helped me figure that out – Robert Nov 25 '17 at 10:46
20
$(this).parent()

Tree traversal is fun

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

And much more ways, you might find these docs helpful.

Anurag
  • 140,337
  • 36
  • 221
  • 257
16

This will find the first parent with class box then find the first child class with regex matching something and get the id.

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")
user2601995
  • 6,463
  • 8
  • 37
  • 41
7

If I understood your problem correctly, $(this).parents('.box').children('.something1') Is this what you are looking for?

Teja Kantamneni
  • 17,402
  • 12
  • 56
  • 86
5

You could use .each() with .children() and a selector within the parenthesis:

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});
Olly
  • 51
  • 1
  • 1