正确获取元素的索引

Question

For each .furcLeft I want to have its unique index, starting from number 1. With the provided code the first .furcLeft has number 1, but the second .furcLeft has number 3, and the next .furcLeft restarts from 1. This is not supposed to happen, the index should continue but not restart.

 $(".furkation.bottom-addFurcation.furcLeft").each(function() { $(this).html(($(this).index()+1)); });

 <tr class="furkation"> <td class="bottom-addFurcation"> <div class="furcLeft"> <:-- Number 1 should appear here --> <div class="insert_furcation"></div> </div> <div class="divider"></div> <div class="furcLeft"> <.-- 2 --> <div class="insert_furcation"></div> </div> </td> <td class="bottom-addFurcation"> <div class="furcLeft"> <.-- 3 --> <div class="insert_furcation"></div> </div> <div class="divider"></div> <div class="furcLeft"> <.-- 4 --> <div class="insert_furcation"></div> </div> </td> <tr> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Try this:

 $(document).ready(function(){ $.each($(".furcLeft"), function(index, item) { $(item).html(index+1); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <tr class="furkation"> <td class="bottom-addFurcation"> <div class="furcLeft"> <!-- Number 1 should appear here --> <div class="insert_furcation"></div> </div> <div class="divider"></div> <div class="furcLeft"> <!-- 2 --> <div class="insert_furcation"></div> </div> </td> <td class="bottom-addFurcation"> <div class="furcLeft"> <!-- 3 --> <div class="insert_furcation"></div> </div> <div class="divider"></div> <div class="furcLeft"> <!-- 4 --> <div class="insert_furcation"></div> </div> </td> <tr>

Answer 2

Consider the following.

 $(".furkation.furcLeft").each(function(i, el) { $(el).html(i + 1); });

 <table> <tr class="furkation"> <td class="bottom-addFurcation"> <div class="furcLeft"> <:-- Number 1 should appear here --> <div class="insert_furcation"></div> </div> <div class="divider"></div> <div class="furcLeft"> <.-- 2 --> <div class="insert_furcation"></div> </div> </td> <td class="bottom-addFurcation"> <div class="furcLeft"> <.-- 3 --> <div class="insert_furcation"></div> </div> <div class="divider"></div> <div class="furcLeft"> <.-- 4 --> <div class="insert_furcation"></div> </div> </td> <tr> </table> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

When using .each() , it is passed an Index and an Element. You can use this to label them if you choose.