jQuery通過.each（）迭代，並根據第一個.each（）提供迭代ID。

Question

不知道如何正確命名問題，因此如果標題誤導，請爲標題道歉。

我有一個tables（約30〜）的列表，我從其他文件加載ajax，具體取決於sidebar menu用戶點擊哪個li data-id。並且每個table都有它自己的id和各自的input在td它自己的id根據table id和table中的輸入數量。

即：table#id_1有input#id_1--input2（input2 CUS它在這個特定table第三input）。

我可以做手工寫的，但我按字母順序排序我的名單，所以如果我將要增加一個新的table將在list中間去，我將不得不重新編寫類似table's的一半， input'sid'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){ 
 
    \t $(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); 
    }); 
}); 

通知的fourthe最後一行是

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

你我們重申所有input s，而現在我們只是迭代input s在我們迭代的div中。

隨着用戶的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>