jquery function with using index()

Question

I am working on a carousel.

Whenever a slide changes, I get the index value of that slide.

There are three slides! so 0-2 are the index values.

Now I have this html on the page, for three dots, which indicate which slide is active. So if the dot is white, the slide is active.

This is simply done by adding the "act" class to the element.

<a id="th_1" class="thumb act"></a>
<a id="th_2" class="thumb"></a>
<a id="th_3" class="thumb"> </a>

Above you can see "th_1" is active. The others have all grey dots in the css.

Anyways, I have the index by this js code:

var slide = $(this).find('.slideshow.activated');
var index = slide.index();

Above, we find the element in this slide DIV, which has the classes item and active. "this" is a container div.

I just don't know how to make this into a function, which adds the "act" class to the correct html element as above.

perhaps I should change the element names to become zero-based (th_0, th_1, th_2) and use some regex?

I am wondering if anyone knows any tips on this.

Thanks

jka6510 · Accepted Answer · 2012-02-17 10:09:52Z

1

$('.thumb').removeClass('act').eq(index).addClass('act');

answered Feb 17, 2012 at 10:09

jka6510

8365 silver badges8 bronze badges

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

Comments

Jon · Accepted Answer · 2012-02-17 10:08:25Z

If I understand correctly, you have the zero-based index of the active element in the slide div and you want to select the element with the same index among those that have the class thumb.

You can do this with $(".thumb").slice(index, 1), so for example to add the class act to that element:

$(".thumb").slice(index, 1).addClass('act');

If you also need to remove the class from the previously active element, you can do this conveniently with

$(".thumb").removeClass('act').slice(index, 1).addClass('act');

There is no need to change your ids with this approach (it does not even care if your elements have ids); it just requires that there is an 1-1 correspondence between elements in the slide div and thumb elements.

André Alçada Padez · Accepted Answer · 2012-02-17 10:08:37Z

0

there is no need to change the indexes, you can do something like

$('a.thumb').removeClass('act');
$('#th_' + (index + 1)).addClass('act');

answered Feb 17, 2012 at 10:08

André Alçada Padez

11.7k26 gold badges72 silver badges130 bronze badges

Comments

André Alçada Padez · Accepted Answer · 2012-02-17 10:09:25Z

0

Does this helps?

var slide = $(this).find('.slideshow.activated');
var index = parseInt(slide.index()) + 1;
$('.thumb').removeClass('act');
$('#th_'+index).addClass('act');

edited Feb 17, 2012 at 10:09

André Alçada Padez

11.7k26 gold badges72 silver badges130 bronze badges

answered Feb 17, 2012 at 10:08

core1024

1,88215 silver badges22 bronze badges

Collectives™ on Stack Overflow

jquery function with using index()

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related