jquery get current number of child

Question

<div id="sample">
  <h3>headline 1</h3>
  <h3>headline 2</h3>
  <h3>headline 3</h3>
</div>

How is it now possible to determine the clicked h3 child element and process this with jquery?

var id = $("h3").index();

this is'nt it?

possible duplicate of [jQuery: Get index of element as child relative to parent](http://stackoverflow.com/questions/4996002/jquery-get-index-of-element-as-child-relative-to-parent) — James Donnelly, Sep 22 '14 at 10:25

score 3 · Accepted Answer · answered Sep 22 '14 at 10:26

Inside click handler, you have to refer to $(this) to refer to the clicked element. Try like

$("h3").on("click",function(){


  alert($(this).index());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sample">
  <h3>headline 1</h3>
  <h3>headline 2</h3>
  <h3>headline 3</h3>
</div>

Milind Anantwar · Answer 2 · 2014-09-22T10:41:41.940

1

You need to write the click event on h3 elements:

$("h3").click(function() {
  var index= $(this).index();
  alert(index);
});

Working Demo

edited Sep 22 '14 at 10:41

answered Sep 22 '14 at 10:26

Milind Anantwar

81,290
25
94
125

this only returns 0 on no matter what child i click – Der Admin81 Sep 22 '14 at 10:35

score 1 · Answer 3 · answered Sep 22 '14 at 10:26

1

Pass this inside index function

$("h3").click(function(){
 var id = $("h3").index(this);
})

answered Sep 22 '14 at 10:26

Girish

11,907
3
34
51

score 1 · Answer 4 · answered Sep 22 '14 at 10:26

1

Try

$("h3").click(function(event){
  alert( $(this).index() + 1);
});

DEMO

answered Sep 22 '14 at 10:26

Sudharsan S

15,336
3
31
49

jquery get current number of child

4 Answers4