Get elements eq () index
Let's say I have an unknown number of div elements inside a parent element. When I click on the child div element , I want to print its index eq()
using console.log()
. I don't want to use any classes or IDs.
HTML:
<div id="parent">
<div></div><!--if I click on this element eq() should be 0-->
<div></div>
<div></div><!--if I click on this element eq() should be 2-->
<div></div>
<div></div>
</div>
JS:
$(this).click(
function(){
console.log(eqIndex);//now this div eq is a problem
}
);
CSS
#parent div{
height: 10px;
width: 10px;
background-color:blue;
margin:2px;
}
source to share
Try to bind the event to element selector
and print the result by calling .index()
over that object,
$('div').click(
function(){
console.log($(this).index());
}
);
$('div').click(
function() {
$("<p>").html($(this).index()).appendTo(document.body);
}
);
div {
height: 10px;
width: 10px;
background-color: blue;
margin: 2px;
}
<div></div>
<div></div>
<div></div><!--if I click on this element eq() should be 2-->
<div></div>
<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
source to share
eq()
In what context is the question. index()
returns only eq()
against all elements in the parent element. This includes script tags or any other type of element!
In your example, you probably want to concatenate matches with just the element and its child blocks, then use this set of divs to determine the index of the click:
$("div").on("click", function(){
console.log( $(this).parent().children("div").index(this) );
});
This avoids the general problem of including too many items in the index you are indexing.
eg.
<p>Some other sibling</p>
<div></div>
<div></div>
<div></div><!--if I click on this element eq() do you want 2 or 3? -->
<div></div>
<div></div>
If you only want the literal value eq()
, regardless of other elements, just use index()
without a parameter:
$("div").on("click", function(){
console.log( $(this).index() );
});
source to share
If you want to grab the index of the clicked div in relation to all divs in the document no matter where they are, you need to use the option index
:
If
.index()
called on a set of elements and a DOM element or jQuery object is passed in,.index()
returns an integer indicating the position of the passed element relative to the original collection.
$(function() {
$("div").on("click", function() {
var index = $("div").index(this);
/*
* $(this).index("div") produces same result
*/
$("#result").text("div:eq(" + index + ") was clicked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section>
<div>0. (1.1)</div>
<div>1. (1.2)</div>
<div>2. (1.3)</div>
</section>
<section>
<div>3. (2.1)</div>
<div>4. (2.2)</div>
<div>5. (2.3)</div>
</section>
<section>
<div>6. (3.1)</div>
<div>7. (3.2)</div>
<div>8. (3.3)</div>
</section>
<p id="result">(click the div)</p>
source to share