JavaScript, Jquery find index of clicked element

Question

I building slide, and I need am stack at following problem - How can I found position (index) in the array when a tag is clicked? This part of the code is getting all a tag

 this.thumbs = this.nav.find('a');

How to go from there? And also, there is another problem - I need to toggle class of the div inside a tag (when a tag is clicked div tag needs to get class promo_tumb_current and the one which has that tag need to loose it).

HTML code:

<div class="promo_tumbs col_12">
    <div data-dir="prev" class="prev"></div>
    <div data-dir="next" class="next"></div>
    <div class="promo_tumbs_centar">
        <a href="#first"><div class="promo_tumb promo_tumb_current"></div></a>
        <a href="#second"><div class="promo_tumb"></div></a>
        <a href="#thrid"><div class="promo_tumb"></div></a>
        <a href="#fourh"><div class="promo_tumb"></div></a>
        <a href="#fifth"><div class="promo_tumb"></div></a>
        <a href="#fifth"><div class="promo_tumb"></div></a>
        <a href="#fifth"><div class="promo_tumb"></div></a>
    </div>
</div>

JS code:

<script>
                function Slider(container, nav){
                    this.container = container;
                    this.nav = nav;

                    this.li = this.container.find('li');
                    this.li_width = this.li.first().width();
                    this.li_len = this.li.length;

                    this.thumbs = this.nav.find('a');

                    this.current = 0;
                }

                Slider.prototype.transition = function (coords){
                    this.container.stop().animate({
                        'margin-left' : coords || -(this.current * this.li_width)
                    })
                }

                Slider.prototype.set_current = function(dir){
                    var pos = this.current;
                    if (dir === 'next') {pos++}
                    else if (dir === 'prev') {pos--}                
                    this.current = (pos < 0) ? this.li_len - 1 : pos % this.li_len;

                    return pos;
                }

                var slider = new Slider($('div.promo_inner ul'), $('div.promo_tumbs'));
                    slider.nav.find('div').on('click', function(){                               
                    if ($(this).attr("data-dir") === undefined ) {
                        var index = slider.thumbs.index();

                        console.log(index)
                    } else {
                         slider.set_current($(this).data('dir'));                    
                    }               
                    slider.transition();


                })

Samuel Rossille · Accepted Answer · 2012-05-31 08:49:16Z

2

I think that what you need is

http://api.jquery.com/index/

For example, within your event handler (where this is the clicked a tag):

var index = thumbs.index($(this))

edited May 31, 2012 at 8:49

answered May 31, 2012 at 8:38

Samuel Rossille

20.1k18 gold badges66 silver badges92 bronze badges

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

7 Comments

Anthony Grist Over a year ago

Your code is backwards. You're searching for the index of this in thumbs, so it should be: var index = thumbs.index(this);.

Sasha Over a year ago

When I try this I get -1 for a result. I need to add slider before thumbs var index = $(this).index(slider.thumbs) or it will produce error.

Samuel Rossille Over a year ago

@Sasha probably because of the error noticed by Anthony Grist. Sample code fixed, sorry

Sasha Over a year ago

I am still getting -1 as a result o.O?

Samuel Rossille Over a year ago

It means that the clicked link is not in the "thumbs" selection. You have to use the debugger to find why... Probaly something stupid somewhere. Please check that this is actually a link, and that thumbs is actually your collection of links.

|

Collectives™ on Stack Overflow

JavaScript, Jquery find index of clicked element

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related