CODEWITHSUNDEEP
javascriptjquery
wordpress user
wordpress user

Reputation: 584

jQuery current class number out of total classes

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'){
 .....
}

Upvotes: 0

Views: 116

Answers (2)

user94559
user94559

Reputation: 60143

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>

Upvotes: 3

guest271314
guest271314

Reputation: 1

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>

Upvotes: 2

Related Questions