Jquery selecting a nested element inside the next element

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>

Mihai Alexandru-Ionut · Accepted Answer · 2016-12-16 07:58:02Z

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>

edited Dec 16, 2016 at 7:58

answered Dec 16, 2016 at 7:52

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mairaj Ahmad · Accepted Answer · 2016-12-16 07:55:56Z

0

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

answered Dec 16, 2016 at 7:55

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

1 Comment

user3779703 Over a year ago

Hi Thanks for the reply - yes I am aware of the click event i was just more focusing on the method to traverse inside the div. The find method in your example and others is what i needed - thank you all for your help - as Leopard was the first to provide this method and I can only apply 1 correct answer I will apply to him but thanks to you all

guradio · Accepted Answer · 2016-12-16 07:53:56Z

0

$("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()

answered Dec 16, 2016 at 7:53

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Comments

brk · Accepted Answer · 2016-12-16 07:54:52Z

0

You can do like this

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

DEMO

answered Dec 16, 2016 at 7:54

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Emre Türkiş · Accepted Answer · 2016-12-16 07:58:08Z

0

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.

answered Dec 16, 2016 at 7:58

Emre Türkiş

1,00210 silver badges23 bronze badges

Collectives™ on Stack Overflow

Jquery selecting a nested element inside the next element

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related