时间戳

首页 > 解决方案 > 正确获取元素的索引

javascript - 正确获取元素的索引

问题描述

对于每个.furcLeft我想有它的唯一索引，从数字 1 开始。使用提供的代码，第一个.furcLeft有数字 1，但第二个.furcLeft有数字 3，下一个.furcLeft从 1 重新开始。这不应该发生，索引应该继续但不重新启动。

$(".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>

标签： javascriptjquery

解决方案

考虑以下。

$(".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>

使用时.each()，它被传递一个索引和一个元素。如果您愿意，可以使用它来标记它们。

推荐阅读