JQuery найти родительский элемент или найти

Question

как я могу найти активный класс (this): .item-name? Поскольку эти элементы являются динамическими, я использую .find, но я думаю, что я должен добавить здесь .parent().

$(this).find('.item-name').val(customers.product);

HTML:

<tr class="item-row"> 
       <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Hourly Rate</textarea> 
       <a class="delete" href="javascript:;" title="Remove row">X</a> 
       <a class="add-product" href="javascript:;" title="Add Product">O</a> 
       </div></td> 
       <td class="description"><textarea form ="testinsert" name="item_desc[]">Business Rate: Consulting/Labor/Installs</textarea></td> 
       <td><textarea class="cost" form ="testinsert" name="item_cost[]">$150.00</textarea></td> 
       <td><textarea class="qty" form ="testinsert" name="item_qty[]">3</textarea></td> 
       <td><span class="price" form ="testinsert" name="item_price[]">$450.00</span></td> 
</tr> 

JAVASCRIPT:

function populateTableRow($tableBody, data, selectedCustomerAutonum) { 
        var customers; 
        $.each(data, function() { 
         if (this.autonum == selectedCustomerAutonum) { 
          customers = this; 
          return false; 
         } 
        }); 

        $(this).find('.item-name').val(customers.product); 
        $(this).find('.item-desc').val(customers.disc); 
} 

UPDATE (населяет ALL продукта и DESC):

$('.add-product').click(function(){ 
//$('.add-product').live('click',function(){ 
// ************************************** 
    $("#productdiv").css("display", "block"); 

    $.ajax({          
     url: 'product_fill.php',       
     data: {action:"invoice"},            
     dataType: 'json',     
     success: function(data){ 
      populateSelectBoxes($('#productdiv #ddproduct'), data); 

      function populateSelectBoxes($select, data) { 
       var products = []; 
       $.each(data, function() { 
        products.push('<li data-value="'+this.autonum+'">' + this.product + '</li>'); 
       }); 
       $select.append(products.join('')); 
      } 

      function populateTableRow($addProduct, data, selectedCustomerAutonum) { 
       var customers; 
       $.each(data, function() { 
        if (this.autonum == selectedCustomerAutonum) { 
         customers = this; 
         return false; 
        } 
       }); 

       $addProduct.parents().find("textarea[name^='item_name']").val(customers.product); 
       $addProduct.parents('.item-row').find("textarea[name^='item_desc']").val(customers.disc); 
       $addProduct.parents('.item-row').find("textarea[name^='item_cost']").val(customers.rate); 

      } 

      $('#productdiv #ddproduct li').click(function(e) { 
       var selection = $(this).attr("data-value"); 
       $(this).parent().parent().parent().hide(); 
       populateTableRow($('.add-product'), data, selection); 
       $('ul').empty(); 
      }); 


     } 
    }); 

Answer 1

Моя проблема была в populateTableRow() функции для обновления элементов в такой же, как есть якорь, которая была нажата, чтобы вызвать $ («добавить продукт„). Жить (“нажмите кнопку» ... обработчик событий.

решение способ просто создать переменную в рамках этого обработчика щелчка и ссылаться на него в populateTableRow()

var clickedRow добавил в правильном объеме:.

$('.add-product').live('click',function(){ 

var clickedRow = $(this).closest("tr"); // <--- ADD THIS PART 

$("#productdiv").css("display", "block"); 

$.ajax({          
    url: 'product_fill.php',       
    data: {action:"invoice"},            
    dataType: 'json',     
    success: function(data){ 
    populateSelectBoxes($('#productdiv #ddproduct'), data); 

    function populateSelectBoxes($select, data) { 
     var products = []; 
     $.each(data, function() { 
      products.push('<li data-value="'+this.autonum+'">' + this.product + '</li>'); 
     }); 
     $select.append(products.join('')); 
    } 

    function populateTableRow(data, selectedCustomerAutonum) { 
     var customers; 
     $.each(data, function() { 
      if (this.autonum == selectedCustomerAutonum) { 
       customers = this; 
       return false; 
      } 
     }); 
     clickedRow.find("textarea[name^='item_name']").val(customers.product); 
     clickedRow.find("textarea[name^='item_desc']").val(customers.disc); 
     clickedRow.find("textarea[name^='item_cost']").val(customers.rate); 
    } 

    $('#productdiv #ddproduct li').click(function(e) { 
     var selection = $(this).attr("data-value"); 
     $(this).parent().parent().parent().hide(); 
     populateTableRow(data, selection); 
     $('ul').empty(); 
    }); 
} 
}); 

Answer 2

Эти линии:

   $(this).find('.item-name').val(customers.product); 
       $(this).find('.item-desc').val(customers.disc); 

находят все элементы с именем класса item-name и item-desc (т.е. <textarea class="item-name">, которого у вас нет в вашем HTML. Вам нужно настроить таргетинг на атрибут name, который будет соответствовать.

   $(this).find("textarea[name^='item-name']").val(customers.product); 
       $(this).find("textarea[name^='item-desc']").val(customers.disc); 

Трудно точно определить на основе кода вы показываете, но, вероятно, также необходимо использовать $tableBody.find() вместо $(this).find(), потому что в этой области, $(this) вероятно пустует.