Как различать входы с одним классом?

Question

У меня есть одна кнопка, которая дублирует эту строку, чтобы выбрать больше продуктов. Моего Html:

<td> 
    <input type="hidden" class="cod_linha" name="cod_linha[]"style="width: 100%;" /> 
    <input type="text" name="linha[]" class="linha" style="width: 100%;" /> 
</td> 

Проблема заключается в том, у меня есть две функций, которые находят продукт и другие, что заполнить все поля, которые я хочу автоматически, что я должен сделать, чтобы отличаться это наполненным полем пустого поля? Я попытался это:

var table = $('#tabelaPedido'); 
$(table).each(function() { 
if($(this).find('input.linha').val()=== ''){ 
    Executes my function to fill the fields and to add a new line. 
} 
else{ } 

И это тоже:

var counter = $(table).find("input.linha").length; 
for(var i =0; i < counter; i++){ 
if($(table).find('input.linha').eq(i).val()== ''{} 

Но эти коды не заполняют другую пустую строку. см Imagem:

Мой код для заполнения поля:

function preencherCamposProduto(obj) { 
    var table = $('#tabelaPedido'); 
    $(table).each(function() { 
     if($(this).find('input.linha').val()=== '' && 
       $(this).find('input.ref').val()=== '' && 
       $(this).find('input.material').val()=== '' && 
       $(this).find('input.cor').val()=== '' && 
       $(this).find('input.descricao_marca').val()=== ''){ 
    $.ajax({type: "POST", 
     url: '/pedidoOnline/index.php/Pedidos/pesquisarCamposProduto', 
     async: false, 
     data: { 
      cd_cpl_tamanho: obj 
     }, 
     dataType: 'json', 
     success: function(data) { 
      var linhaId = data[0].idLinha; 
      var linhaLabel = data[0].labelLinha; 
      var refId = data[0].idRef; 
      var refLabel = data[0].labelRef; 
      var corId = data[0].idCor; 
      var corLabel = data[0].labelCor; 
      var marcaId = data[0].idMarca; 
      var marcaLabel = data[0].labelMarca; 
      var materialId = data[0].idMaterial; 
      var materialLabel = data[0].labelMaterial;` 

      var table = $('#tabelaPedido'); 
      $(table).each(function() { 
       $(this).find('input.cod_linha').val(linhaId); 
       $(this).find('input.linha').val(linhaLabel); 
       $(this).find('input.cod_ref').val(refId); 
       $(this).find('input.ref').val(refLabel); 
       $(this).find('input.cod_material').val(materialId); 
       $(this).find('input.material').val(materialLabel); 
       $(this).find('input.cod_cor').val(corId); 
       $(this).find('input.cor').val(corLabel); 
       $(this).find('input.id_marca').val(marcaId); 
       $(this).find('input.descricao_marca').val(marcaLabel); 

     }); 


     } 
    }); 
    chamaAdicionarCampo(); 
    }else{ 
     console.log('Entrei no else'); 
    } 
    }); 
} 

Спасибо большое.

Answer 1

Я прочитал ваш код и написал a sample code in jsfiddle, что делает то, о чем вы пишете. В моем решении я использую селектор #tabelaPedido tr:last CSS, чтобы выбрать последнюю добавленную строку, а затем записать значения в поля этой строки.

Надеюсь, это поможет.

Answer 2

следующее простое решение JQuery может помочь вам:

$(document).ready(function(){ 

    $('.linha').each(function(){ 
    if ($(this).val() == ''){ 
    //Call Your fill input function $(this) as parameter 
    } 

    }); 
}); 

Checkout Это DEMO

Answer 3

С ответом @zegoline и @semsem я понять это .. Теперь она работает! Я добавил $("tr:last").find() в каждое поле по каждой моей функции и #table tr:last тоже ... Большое спасибо!