Passing index of occurrence of class

Question

Suppose I have the following HTML:

<div id="Container">
    <div class="TheClass"></div>
    <div class="TheOtherClass"></div>
    <div class="TheClass"></div>
    <div class="TheOtherClass"></div>
    <div class="TheClass"></div>
    <div class="TheOtherClass"></div>
</div>

As you can see, I have two classes alternating. I want to pass the index of the class TheClass in terms of its occurrence inside the container.

If I write:

$('#Container').on({
   click: function () { SomeFunction($(this).index()); }
}, '.TheClass');

and click on the last element TheClass, the parameter passed will be 5 but I want to receive 3 because the last TheClass element is the third occurrence. How can I do that?

Arun P Johny · Accepted Answer · 2014-01-28 16:07:21Z

5

Try the index() variant that takes an selector as parameter

$('#Container').on({
    click: function () {
        SomeFunction($(this).index('#Container .TheClass'));
    }
}, '.TheClass');

Demo: Fiddle

answered Jan 28, 2014 at 16:07

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

pbarney · Accepted Answer · 2014-01-28 18:05:33Z

0

Just define your index in terms of the the class you're trying to reference:

    $('#Container').on({
        click: function () { 
            SomeFunction($(this).index("." + $(this).attr('class')) + 1);
        }
    }, '.TheClass');

This way, your code is DRYer and more portable.

edited Jan 28, 2014 at 18:05

answered Jan 28, 2014 at 16:18

pbarney

2,9634 gold badges41 silver badges55 bronze badges

Collectives™ on Stack Overflow

Passing index of occurrence of class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related