Let's say I have unknown number of div elements inside parent element. When I click on child div element I want to print out its eq() index 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;
}

DEMO

Let's say I have unknown number of div elements inside parent element. When I click on child div element I want to print out its eq() index 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;
}

DEMO

• javascript
• jquery
• html

• 4 It's well worth your time to read through the jQuery API from beginning to end. It literally takes an hour, two at the most, and it pays you back that time almost immediately. – T.J. Crowder Commented Apr 22, 2015 at 9:28
• eq() in what context is the question here. index() only returns the eq() with regard to all elements in the immediate parent. You need to make the question clearer. – iCollect.it Ltd Commented Apr 22, 2015 at 9:34
• Here I edited the question and the code to make it little bit more specific. I want to print out eq() index of only child elements of the parent div. – atho Commented Apr 22, 2015 at 14:42

3 Answers 3

Try to bind event with element selector and print the result by invoking .index() over this 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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

eq() in what context is the question here. index() only returns the eq() with regard to all elements in the parent. That includes script tags, or any other element type!

In your example you probably want to scope the matches to just the item and its sibling divs, then use that set of divs to determine the index of the one clicked:

$("div").on("click", function(){
    console.log( $(this).parent().children("div").index(this) );
});

This will avoid the mon problem of including too many elements in the collection you index.

e.g.

<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 eq() value, regardless of other elements, just use index() with no parameter:

$("div").on("click", function(){
    console.log( $(this).index() );
});

If you want to grab the index of the clicked div with respect to all divs in the document no matter where they are, you need to use a variant of the index function:

If .index() is called on a collection 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./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>