找到与此最接近的类

Question

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

Answer 1

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

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

Working Demo

Answer 2

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

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

Working Demo

Answer 3

Use this

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

Demo here

Answer 4

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

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

Demo

Reference

.nextAll()

.find()

Answer 5

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');
  });
});