Question

I am wondering how to affect a certain span index within multiple divs.

Fiddle

I have 3 Clickable Divs and 3 Span Sets within 3 other Divs like so…

HTML

<div class='clickable'>DIV</div>
<div class='clickable'>DIV</div>
<div class='clickable'>DIV</div>

<div class='spanset'>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<div>

<div class='spanset'>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<div>


<div class='spanset'>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<span>SPAN</span><br/>
<div>

Now this is my JQuery to affect the proper span on click (Error lies within here)

JQuery

$('.clickable').on('click', function() {

    $('span').css({'color': 'black' });

    x = $(this).index();

    $('.spanset span').eq(x).css({
        'color': 'red'
    });

});

It seems it is indexing the spans as a whole, not indexing them from each of their container div’s (spanset class)

I am sure this has to do with this selector in JQuery

 $('.spanset span').eq(x)

Ultimately, When I click div 1, I would like the first span of each spanset to be affected, not just the first and only span on the page.

Any Thoughts?

Answer 1

The other answers here suggest using a loop, you don’t need to, just use the :eq pseudo selector.

eg.

$('span:eq(' + x + ')', '.spanset').css({
    'color': 'red'
});

Here’s a demo