CODEWITHSUNDEEP
javascriptjqueryhtml
Fane
Fane

Reputation: 2076

How to know the order number of the child element selected in relation to its parent?

I have a html structure like the following:

<div id="first">
     <div id="second">
         <div class="inside"></div>
         <div class="inside"></div>
         <div class="inside"></div>
         <div class="inside"></div>
         <div class="inside"></div>
     </div>
</div>

And the following javascript / jquery code:

$(".inside").mouseover(function(ev){

        var el = ev.currentTarget;

        //TODO: get real element
        var el_position = 1;

});

What I want to do is check the number of ".inside" that is being hovered with the mouse. So, if I hover the first entry of ".inside" it should display "1". In the fourth it should display "4". But accessing the variable "el" (ev.currentTarget) has no "element position" property or anything of the alike that would allow me to understand the position of the actual hovered element in relation to "#second" (the first, second, third, etc .inside).

So, does anyone have any idea? Can I get some help? Thank you very much :)

Upvotes: 0

Views: 81

Answers (1)

guest271314
guest271314

Reputation: 1

You can use .index() which returns the 0-based index of the element within a collection

$(".inside").mouseover(function(ev) {
  var el = ev.currentTarget;
  //TODO: get real element
  var el_position = $(el).index(".inside") + 1;
  console.log(el_position);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="first">
  <div id="second">
    <div class="inside">1</div>
    <div class="inside">2</div>
    <div class="inside">3</div>
    <div class="inside">4</div>
    <div class="inside">5</div>
  </div>
</div>

Upvotes: 3

Related Questions