javascript - jQuery 迭代 .each() 并根据第一个 .each() 给出迭代 id

Question

不知道如何正确命名问题，因此如果标题具有误导性，请深表歉意。

我有一个列表 tables (大约30~)我正在加载ajax来自其他文件，具体取决于哪个 li data-id关于sidebar menu用户正在点击。以及每个 table有它自己的id每个 input在td自己的id基于table id以及 table 中的输入数量。

即:table#id_1有一个 input#id_1--input2 ( input2 因为它是这个特定 input 中的第三个 table )。

我可以手动进行写作，但我按字母顺序对列表进行排序，所以如果我想添加新的table它将位于 list 的中间我将不得不重写 table's 的一半和input's id's这是一个大反对。

所以我正在尝试获取一个可以添加 id attribute 的函数至table并基于table id它可以设置input id + 在 input 末尾添加它的索引(如上面的示例和片段末尾的 effect i want )。

var div = $('table');

div.each(function(index){
  var inputid = index - 2;
  
  $(this).attr('id', 'id_'+index);
  
  $('input').each(function(inputIndex){
  	 $(this).attr('id', 'id_'+inputid+'-input'+inputIndex);
  });
});

div{
  margin-bottom: 20px;
}

span{
  background-color: black;
  color: white;
  padding: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>The effect i'm receiving:</span>
<div>
Table 1 //#id_0
  <table>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_0-input0
    </td></tr>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_0-input1
    </td></tr>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_0-input2
    </td></tr>
  </table>
</div>

<div>
Table 2 //#id_1
  <table>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_0-input3
    </td></tr>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_0-input4
    </td></tr>
  </table>
</div>

<div>
Table 3 //#id_2
  <table>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> ...
    </td></tr>
    <tr><td>
      <label for="">item</label>
      <input type="number"> ...
    </td></tr>
    <tr><td>
      <label for="">item</label>
      <input type="number"> //input_0-input7
    </td></tr>
  </table>
</div>

<span>The effect I want:</span> 
<div>
Table 1 //#id_0
  <table>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_0-input0
    </td></tr>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_0-input1
    </td></tr>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_0-input2
    </td></tr>
  </table>
</div>

<div>
Table 2 //#id_1
  <table>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_1-input0
    </td></tr>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_1-input1
    </td></tr>
  </table>
</div>

<div>
Table 3 //#id_2
  <table>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> //id_2-input0
    </td></tr>
    <tr><td>
      <label for="">item</label>
      <input type="number"> //id_2-input1
    </td></tr>
    <tr><td>
      <label for="">item</label>
      <input type="number"> //id_2-input2
    </td></tr>
  </table>
</div>

Answer 1

将您的 JavaScript 代码更改为:

var div = $('table');

div.each(function(index){
  var inputid = index;

  $(this).attr('id', 'id_'+index);

  $(this).find('input').each(function(inputIndex){
     $(this).attr('id', 'id_'+inputid+'-input'+inputIndex);
  });
});

注意第四行最后一行是

$(this).find('input').each(...)

我们再次重申所有的 input，而现在我们只迭代 div 中的 input迭代。

正如用户 S McCrohan 在评论中提到的:
var inputid = index - 2;
没有必要，应该是:
var inputid = 索引;

编辑: https://jsfiddle.net/xxL5tuvw/