Get index of clicked element in collection with jQuery – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and jquery. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Get index of clicked element in collection with jQuery.
Problem :
How do I get the index of clicked item in the code below?
$('selector').click(function (event) {
// get index in collection of the clicked item ...
});
With Firebug I saw this: jQuery151017197709735298827: 2 (I’ve clicked in the second element).
Solution :
This will alert the index of the clicked selector (starting with 0 for the first):
$('selector').click(function(){
alert( $('selector').index(this) );
});
$('selector').click(function (event) {
alert($(this).index());
});
Siblings
$(this).index() can be used to get the index of the clicked element if the elements are siblings.
<div id="container">
<a href="#" class="link">1</a>
<a href="#" class="link">2</a>
<a href="#" class="link">3</a>
<a href="#" class="link">4</a>
</div>
Not siblings
If no argument is passed to the
.index()method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
Pass the selector to the index(selector).
$(this).index(selector);
Example:
Find the index of the <a> element that is clicked.
<tr>
<td><a href="#" class="adwa">0001</a></td>
</tr>
<tr>
<td><a href="#" class="adwa">0002</a></td>
</tr>
<tr>
<td><a href="#" class="adwa">0003</a></td>
</tr>
<tr>
<td><a href="#" class="adwa">0004</a></td>
</tr>
Just do this way:-
$('ul li').on('click', function(e) {
alert($(this).index());
});
OR
$('ul li').click(function() {
alert($(this).index());
});
check this out
https://forum.jquery.com/topic/get-index-of-same-class-element-on-click
then
http://jsfiddle.net/me2loveit2/d6rFM/2/
var index = $('selector').index(this);
console.log(index)
if you are using .bind(this), try this:
let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);
$(this.pagination).find("a").on('click', function(evt) {
let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);
this.goTo(index);
}.bind(this))