CODEWITHSUNDEEP
javascriptjquery
Alex
Alex

Reputation: 133

Get index of element properly

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>

Upvotes: 0

Views: 34

Answers (2)

Twisty
Twisty

Reputation: 30883

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.

Upvotes: 1

Majed Badawi
Majed Badawi

Reputation: 28404

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>

Upvotes: 1

Related Questions