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

      

DEMO

+3


source to share


3 answers


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>
      

Run codeHide result


+5


source


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

      

+3


source


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>
      

Run codeHide result


+2


source







All Articles