Question

不知道如何正确命名问题，如果标题误导，请为标题道歉。

我有一个arr.Length < 2（大约30~）的列表，我正在从其他文件加载tables，具体取决于ajax用户点击的li data-id 。每个sidebar menu都有自己的table，id中的每个input都有td基于id和table id的输入数量table。

I.e：table#id_1有一个input#id_1--input2（input2 cus，它是此特定input中的第三个table。

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

所以我试图获得一个可以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，而我们现在只迭代我们迭代的input中的div。

正如用户S McCrohan在评论中提到的：
var inputid = index - 2;
是不必要的，应该是：
var inputid = index;

修改： https://jsfiddle.net/xxL5tuvw/

Answer 2

var div = $('div');

div.each(function(index){   
  $(this).attr('id', 'id_'+index);
  
  $('input', this).each(function(inputIndex){
     var id = 'id_'+index+'-input'+inputIndex;
     $(this).attr('id', id).after('<span>' + id+ '</span>');
     // above .after() to show the id, u can remove it 
  });
});

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">
    </td></tr>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> 
    </td></tr>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> 
    </td></tr>
  </table>
</div>

<div>
Table 2 //#id_1
  <table>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> 
    </td></tr>
    <tr><td>
      <label for="">item</label> 
      <input type="number"> 
    </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">
    </td></tr>
  </table>
</div>

jQuery迭代.each（）并根据第一个.each（）给出迭代id

2 个答案: