jQuery current class number out of total classes

Question

Is there anyway i can find the current class number?
For example: Total elements with class 'TEST' are 20. $('.TEST').length If i click on 4th test element i should get 4. I played with index but couldn't get it to work.
Please look the example below.

<div class="a">
    <div class="b">
        <div class="TEST">CLICK ON THIS.</div>
    </div>
</div>

<div class="e">
    <div class="f">
        <div class="TEST">CLICK ON THIS.</div>
    </div>
</div>

<div class="k">
    <div class="t">
        <div class="TEST">CLICK ON THIS.</div>
    </div>
</div>
.....

Jquery

$(document).on('click','.TEST'){
 .....
}

user94559 · Answer 1 · 2016-07-17T19:33:57.983

3

I think this is what you're looking for. Sounds like you were close.

$(function () {
  $('.TEST').click(function () {
    console.log($('.TEST').index(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
    <div class="b">
        <div class="TEST">CLICK ON THIS.</div>
    </div>
</div>

<div class="e">
    <div class="f">
        <div class="TEST">CLICK ON THIS.</div>
    </div>
</div>

<div class="k">
    <div class="t">
        <div class="TEST">CLICK ON THIS.</div>
    </div>
</div>

edited Jul 17 '16 at 19:33

answered Jul 17 '16 at 19:21

user94559

59,196
6
103
103

Optionally, add a `+1` if you really want the 4th element to be 4 instead of 3. – user94559 Jul 17 '16 at 19:23
Why did you remove event delegation from approach? – guest271314 Jul 17 '16 at 19:26
@guest271314 I didn't notice that part of the question. (I don't see an edit, so I must have just skipped it.) Either way should work the same. – user94559 Jul 17 '16 at 19:32
@smarx please use `$('.TEST').index( this )` the `$()` is unnecessary – Roko C. Buljan Jul 17 '16 at 19:33
Hey , Thanks working perfect. One more thing if you could help. Can we do it reverse? like test[2].parent() should point to class 't'. – wordpress user Jul 17 '16 at 19:36
nice edit. 'Upped! Also, caching `$(".TEST")` beforehand in a variable (since there's no use of `.on()` delegation) would be great. – Roko C. Buljan Jul 17 '16 at 19:36
@smarx _"Either way should work the same."_ If `.TEST` elements are added dynamically? – guest271314 Jul 17 '16 at 19:37
@guest271314 the dynamically added elements are not accounted since there's no delegation to future `.TEST` by using `.on()` - Your example (on the other hand) is quite on point. – Roko C. Buljan Jul 17 '16 at 19:38
Correct, if new elements are added dynamically, they won't have click handlers attached. – user94559 Jul 17 '16 at 19:39
They will if attach `click` event to `document` instead of existing `.TEST` elements – guest271314 Jul 17 '16 at 19:39
@guest271314 I was answering your question "If `.TEST` elements are added dynamically?" in the context of my code. – user94559 Jul 17 '16 at 19:40
@smarx This is why asked why event delegation was removed at your Answer following attempted event delegation approach illustrated at OP? – guest271314 Jul 17 '16 at 19:42
@guest271314 I believe I already answered your question. I'm not sure what you're trying to do here. – user94559 Jul 17 '16 at 19:44

guest271314 · Accepted Answer · 2016-07-17T19:22:59.153

2

Note, click on fourth .TEST element should return 3, as .index() uses 0-based index

$(document).on('click', '.TEST', function(e) {
  console.log($(this).index(".TEST"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div class="b">
    <div class="TEST">CLICK ON THIS.</div>
  </div>
</div>

<div class="e">
  <div class="f">
    <div class="TEST">CLICK ON THIS.</div>
  </div>
</div>

<div class="k">
  <div class="t">
    <div class="TEST">CLICK ON THIS.</div>
  </div>
</div>

edited Jul 17 '16 at 19:22

answered Jul 17 '16 at 19:20

guest271314

1
15
104
177

Isn't that backwards? See my answer. – user94559 Jul 17 '16 at 19:21
This example will also account for elements added in the future which is quite great – Roko C. Buljan Jul 17 '16 at 19:40
P.S: http://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document – Roko C. Buljan Jul 17 '16 at 19:46
@RokoC.Buljan What do you suggest? `$(document)` could be substituted for `$(".TEST").parent().on("click", fn)`, though if `$("body").append("
new TEST
")` the event would not be fired at click on `new TEST` where newest `.TEST` element parent would be `` element – guest271314 Jul 17 '16 at 19:51
No, `$(".TEST").parent().on("click", fn)` will not delegate events to future elements. Depends on the OP's HTML. `$("#someParent").on("click", ".TEST", callback)` would be best IMHO – Roko C. Buljan Jul 17 '16 at 19:53
@RokoC.Buljan Or, attach `click` event when element is appended to `document`, use named function instead of anonymous function, assign named function as handler when attaching click event. _"`$("#someParent").on("click", ".TEST", callback)` would be best IMHO"_ If element is appended directly to `body`, this would be `$("body").on("click", ".TEST", callback)`, yes? – guest271314 Jul 17 '16 at 19:55
1

@guest271314 Yes, I'd use that way if all my `.TEST` elements were created dynamically. `$("
",{class:"TEST",appendTo:"#parent",on:{click:function(){/*foo*/}}})`... (accounting for those other strange wrappers...) – Roko C. Buljan Jul 17 '16 at 19:59
@RokoC.Buljan Though if define named function, e.g., `function foo(){}` would be `on:{click:foo}})` instead of new anonymous function; same function reference for all `.TEST` elements – guest271314 Jul 17 '16 at 20:01
@guest271314 exactly. – Roko C. Buljan Jul 17 '16 at 22:12

jQuery current class number out of total classes

2 Answers2