Access nested span element in jQuery

Question

I'm trying to change the class of a nested span element, when clicking a certain item. JSFiddle goes here.

HTML:

<div id="title_1" class="title">Title 1</div>
<span id="foo_1" class="foo">
    foo contents<br />
    <span class="bar">bar contents</span>
    <br /><br />
</span>

<div id="title_2" class="title">Title 2</div>
<span id="foo_2" class="foo">
    foo contents<br />
    <span class="bar">bar contents</span>
    <br /><br />
</span>

Changing the class of the first span is possible though $(this).nextAll('.foo:first').addClass('highlight'); like I'm doing in the current JSFiddle.

However I want to change the class of 'bar' element only.

Among some things of what I tried:

$(this).nextAll('.foo:first .bar:first').addClass('highlight');
$(this).nextAll('.foo .bar:first').addClass('highlight');
$(this).nextAll('.foo:first').nextAll('.bar:first').addClass('highlight');
$(this).next('.foo').next('.bar').addClass('highlight');

... all without success.

I think I'm missing something basic here. Can someone help me out?

Theraloss · Accepted Answer · 2017-02-19 14:10:51Z

1

Here you go: https://jsfiddle.net/nez0cvsm/

Just change nextAll() with next() (to access the span after the title) and then add .children() (to access the span inside the span). I used children instead of "find" supposing that inside that span there will be only another one.

answered Feb 19, 2017 at 14:10

Theraloss

7002 gold badges8 silver badges30 bronze badges

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

Comments

BenShelton · Accepted Answer · 2017-02-19 14:21:43Z

1

If you are planning to have more than one span and only want to select the ones with the bar class you can use the following:

$(this).next().children('.bar').addClass('highlight');

Example here (with extra span): https://jsfiddle.net/1ekrjqk1/

answered Feb 19, 2017 at 14:21

BenShelton

9111 gold badge8 silver badges20 bronze badges

Comments

james_bond · Accepted Answer · 2017-02-19 14:24:39Z

1

You can also use next and then find the element with class bar

$(this).next('.foo').find('.bar').addClass('highlight');

Demo: https://jsfiddle.net/yssusqq9/

answered Feb 19, 2017 at 14:24

james_bond

6,9163 gold badges30 silver badges39 bronze badges

Collectives™ on Stack Overflow

Access nested span element in jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related