Find the overall index of an element in jQuery

Question

Please help me someone how to get Index of an Element which is located in different tag groups. I want to get the index of that tag which respect to the body tag.

 $('.selectthis >.wrapper > p').click(function() { // $('.selectthis').length return 3 var getParentIndex = $(this).closest('.selectthis').index(); $('.result').text(getParentIndex); //How to get index as 3 of tag selecthis when i click on 'text3' //When i click on text1 or text3 result is same 0 });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="border: 1px solid green; margin: 10px;"> <div class="selectthis"> <div class="wrapper"> <p> text1 </p> </div> </div> <div class="selectthis"> <divc class="wrapper"> <p> text2 </p> </div> </div> </div> <div style="border: 1px solid blue; margin: 10px;"> <div class="selectthis"> <divc class="wrapper"> <p> text3 </p> </div> </div> <p class="result"> </p> </div>

Answer 1

The .selectthis elements are not siblings so to get the index of them related to each other you need to provide a selector to index() to find the current element within, eg. index('.selectthis')

Also note that the index of an element is zero-based, so the third element would return an index of 2 . As such you need to add one to the value to get the output you want. Try this:

 $('.selectthis >.wrapper > p').click(function() { var getParentIndex = $(this).closest('.selectthis').index('.selectthis') + 1; $('.result').text(getParentIndex); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="border: 1px solid green; margin: 10px;"> <div class="selectthis"> <div class="wrapper"> <p> text1 </p> </div> </div> <div class="selectthis"> <div class="wrapper"> <p> text2 </p> </div> </div> </div> <div style="border: 1px solid blue; margin: 10px;"> <div class="selectthis"> <divc class="wrapper"> <p> text3 </p> </div> </div> <p class="result"></p> </div>

Answer 2

There is no direct way as parent element of each selectthis is different. One work around is, you can get the array of all selectthis and compare it with parent selectthis of clicked text.

see below code

 $(function(){ $('.selectthis >.wrapper > p').click(function() { var $selectThisArray = $('.selectthis'); var getParentIndex = 0; var $parentElement = $(this).closest('.selectthis'); $.each($selectThisArray, function(index, val){ if($(val).is($parentElement)) { getParentIndex = index; } }); $('.result').text(getParentIndex); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="border: 1px solid green; margin: 10px;"> <div class="selectthis"> <div class="wrapper"> <p> text1 </p> </div> </div> <div class="selectthis"> <div class="wrapper"> <p> text2 </p> </div> </div> </div> <div style="border: 1px solid blue; margin: 10px;"> <div class="selectthis"> <div class="wrapper"> <p> text3 </p> </div> </div> <p class="result"> </p> </div>