$("input").on("click", function(){
//how do i find the the input index here?
});
instead of doing the following, I am trying to find a smarter way. any good idea?
$("input").eq(0).on("click", function(){
//do something for eq(0)
});
$("input").eq(1).on("click", function(){
//do something for eq(1)
});
You need to use the index function. There are two ways of calling this.
If all the elements are siblings of the same parent element and there are no other elements within that parent, you can use $(this).index().
When index is called without any parameters, it gets the element's position among its siblings. So the first child of the parent will be 0, the second 1, etc.
If the document structure is more complicated, then you'll have to search among a particular set. This means taking a selection of all the elements that you want to search among, and then passing the element you want to search for as the first parameter. It's exactly as if you were doing an indexOf search on an array.
var inputs = $("input").on("click", function(){
console.log(inputs.index(this));
});
You can pass the clicked element to the jQuery's index method:
var $input = $("input");
$input.on("click", function() {
var i = $input.index(this);
});
You can use this
$("input").on("click", function(){
var index = $(this).index();
});
This will find the index of the clicked input in relation to that of its sibling inputs. Example:
<div>
<input type='text'/> //index 0
<input type='text'/> //index 1
</div>
<div>
<input type='text'/> //index 0
</div>
input elements are siblings.
<ul id="list">
<li><a href="#sdf">abc</a>
</li>
<li><a href="#wer">def</a>
</li>
<li><a href="#xcv">ghi</a>
</li>
<li><a href="#poi">jkl</a>
</li>
</ul>
<div id="count"></div>
This will return the index of each a element using the more up to date .on() method
$("#list li a").on('click', function () {
var index = $("#list li a").index(this) + 1;
$("#count").html(index);
});
If you want to access the DOM element that is in the current iteration of the selector, you will use $(this). If you want to find the actual index of the DOM element in relation to the matched elements, which will be an integer, then you will use .index().
I created a jsfiddle to demonstrate this.
$('.indexme').bind('click',function(){
//$(this) is a jquery object of the currently matched DOM element
//.index() will return the integer value of the actual index
$(this).append($(this).index());
});
$(this) will return a jQuery object containing this, not the index.