jQueryを繰り返して.each（）を実行し、最初の.each（）に基づいて繰り返しIDを与えます。

Question

問題の名前を正しく指定する方法がわからないので、誤解を招くようなタイトルの場合は謝ります。

私は私がsidebar menuユーザーにどのli data-idに応じて、他のファイルからajaxでロードしています（30〜周り）tablesのリストをクリックするとされています。 tableにはそれぞれidがあり、それぞれinputはにあり、idはtable idとなり、入力数はtableとなります。

すなわち：table#id_1は（それは、この特定のtableで第三inputだCUS input2）input#id_1--input2を持っています。

私は手動で書き込みを行うことができますが、私はlistの真ん中に行く新しいtable私はtable'sの半分のように書き換える必要があります追加したくなりますので、もし私は、アルファベット順に私のリストをソートすることだし、 input'sid'sbig nayです。

ので、私はそれが+ input idを設定する（のような上記の例ではとのeffect i wantにinputの終わりに、それのインデックスを追加することができますtableにid attributeを追加できる機能を取得しようとしているとtable idに基づいていますスニペットの最後）。

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のコードを変更し

：fourthe最後の行は、あなたが私たちはすべてのを繰り返し強調している

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

ある

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); 
    }); 
}); 

お知らせもう一度、私たちは反復処理を行っていたdivのinputを反復するだけです。

ユーザー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>