jQuery在下一个元素内选择一个嵌套元素

Question

from the structure below I am trying to place a class on the span that follows the button but I cant seem to traverse into the div containing the span.

I can target the div fine using:

$("button").next('div').addClass('alert');

But can't get that class applied to the span directly using:

$("button").next('div > span').addClass('alert');

or

$("button").next('div').next('span').addClass('alert');

My example structure is

<button>Click</button>
  <div>
    <span></span>
  </div>
<button>Click</button>
  <div>
    <span></span>
  </div>

Answer 1

You need to use find function.

Please try this:

$("button").next('div').find('span').addClass('alert');

 $("button").next('div').find('span').addClass('alert'); 

 .alert{ color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click</button> <div> <span>abc</span> </div> <button>Click</button> <div> <span>def</span> </div> 

Another solution is to use children method.

 $("button").next('div').children('span').addClass('alert'); 

 .alert{ color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click</button> <div> <span>abc</span> </div> <button>Click</button> <div> <span>def</span> </div> 

Answer 2

 $("button").next('div').find('span').addClass('alert'); 

 .alert{color:red} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click</button> <div> <span>this</span> </div> <button>Click</button> <div> <span>this</span> </div> 

This should work. use .next() with .find()

Answer 3

You can do like this

$("button").on('click',function(){
 $(this).next('div').find('span').addClass('alert');
})

DEMO

Answer 4

If you need to add class to span where button is clicked you need to handle click event of button

$(function () {
  $("button").click(function () {
     $(this).next('div').find('span').addClass('alert');
   });
});

Answer 5

As per the documentation, next() traverses siblings:

.next( [selector ] )
Description: Get the immediately following sibling of each element in the set 
of matched elements. If a selector is provided, it retrieves the next sibling 
only if it matches that selector.

So you need to be using children() instead.