jQueryを使用して既存のテーブルにtdを追加する

Question

jQueryを使用して既存のテーブルにtdを追加しようとしています。しかし、重複を追加しています。正確に検証してtdを追加する方法。

私はコードの下にしようとしている：

<table> 
<thead> 
<tr> 
    <th>head1</th> 
    <th>head2</th> 
    <th>head3</th> 
    <th>head4</th> 
</tr> 
</thead> 
    <tbody> 
     <tr > 
      <td class="test test2">a1</td> 
      <td>a2</td> 
      <td>a3</td> 
     </tr> 
     <tr> 
      <td class="test">c1</td> 
      <td>c2</td> 
      <td>c3</td> 
     </tr>    
    </tbody> 
</table> 

jQueryのコード

<script> 
     $(document).ready(function() { 

     for(i=0;i<2;i++){ 
     var row = '<td style="background: red">b_'+ i +'</td>';  
       $('[class="test"]').before(row); 
     } 

}) 
     </script> 

私はまさにclass="test"があるが、それはclass="test test2"とclass="test"の両方を追加し試合tdを追加します。

どうすればいいですか？

Answer 1

$(document).ready(function() { 
     var length= $('[class="test"]').length; 
     for(i=0; i<length; i++){ 
     var row = '<td style="background: red">b_'+ i +'</td>';  
     $('[class="test"]:eq('+(i)+')').before(row); 
     } 
}); 

デモ：https://jsfiddle.net/Lqkmu7L1/