CODEWITHSUNDEEP
jqueryjquery-selectors
user4571629
user4571629

Reputation: 450

find the closest class with this

How can I get or find the .bg when I'm clicking on the .button

<div class="button"></div>
<div class="title"></div>

<div class="content">
    <div class="white"></div>
    <div class="bg">
        Content Goes Here
    </div>
</div>

I'm trying to get it with next, but then I don't know how can I get inside of the .content div

$(document).ready(function(){
   $('.button').click(function(){
       $(this).next().next() ...
  });
});

I've looked for an answer but all of them was with .closest() which I think I need the opposite of that

Upvotes: 0

Views: 61

Answers (5)

user4571629
user4571629

Reputation: 450

Actually what I've meant was this: to find only the first one so the others wouldn't be affected

$(document).ready(function(){
   $('.button').click(function(){
      $(this).siblings('.content:first').find('.bg');
  });
});

Upvotes: 0

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

Try using .siblings and .find() as shown :-

$(document).ready(function(){
   $('.button').click(function(){
      alert($(this).siblings('div.content').find('div.bg').html());
  });
});

Working Demo

Upvotes: 1

I&#39;m Geeker
I&#39;m Geeker

Reputation: 4637

Use this

$(document).ready(function(){
   $('.button').click(function(){
      console.log($(this).next().next('.content').find('.bg').html()); 
  });
});

Demo here

Upvotes: 0

empiric
empiric

Reputation: 7878

You can use .nextAll() and .find() for traversing your DOM:

$('.button').click(function(){
   alert($(this).nextAll('.content').find('.bg').html());
});

Demo

Reference

.nextAll()

.find()

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to use .find() after traversing to content div: 

$('.button').click(function(){
  console.log($(this).next().next().find('.bg'));
});

Working Demo

Upvotes: 0

Related Questions