CODEWITHSUNDEEP
jquery
Min Yang
Min Yang

Reputation: 88

Any way to find the jquery object index when binding event for each jquery object in an array?

$("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)  
});

Upvotes: 3

Views: 79

Answers (5)

steve
steve

Reputation: 11

<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);
});

Upvotes: 0

smilebomb
smilebomb

Reputation: 5483

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());

});

Upvotes: -1

lonesomeday
lonesomeday

Reputation: 237995

You need to use the index function. There are two ways of calling this.

If all the elements are siblings

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 elements aren't all siblings

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));
});

Upvotes: 7

Ram
Ram

Reputation: 144709

You can pass the clicked element to the jQuery's index method:

var $input = $("input");
$input.on("click", function() {
   var i = $input.index(this);
});

Upvotes: 7

tymeJV
tymeJV

Reputation: 104785

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>

Upvotes: 2

Related Questions