Установленное значение тд на основе другого имени тд из AJAX

Question

У меня есть следующая таблица structre:

<tr> 
    <td class="name"> 
    Stock1 
    </td> 
    <td class="price"> 

    </td> 
</tr> 
<tr> 
    <td class="name"> 
     Stock2 
    </td> 
    <td class="price"> 

    </td> 
</tr> 

На основе Stock1 имен и stock2, мне нужно установить соответствующую цену в следующем td. Я веб-соскоб цены через AJAX и пытаюсь установить значение следующим образом:

Для Stock1:

$(document).ready(function() { 
    $.ajax({ 
      *everything else working fine* 
      success: function(data) { 
       if($('.name').html().indexOf("Stock1") != -1) { 
        $(this).closest('tr').find('.price').html(data); 
       } 
      } 
    }); 
}); 

В этом случае this не работает, что я ожидал бы td тега с классом name, где значение равно Stock1. Если я заменю this на ".name", код будет работать только в том случае, если есть name td. Когда у меня есть два тега td с классом name, он не работает.

Мне нужно сделать это, как только документ загрузится, а не на какое-либо событие, например, щелчок мышью или зависание.

Answer 1

this не относится к td.name элемент не table.

:contains() Selector выбирает все элементы, которые содержат указанный текст для целевой td, а затем использование может использовать DOM отношение целевого немедленные следующий Sibling td с помощью .next().

$('td.name:contains("Stock1")').next('.price').html(data); 

или

$('td.name:contains("Stock1")').closest('tr').find('.price').html(data); 

Вы также можете использовать .filter()

var var1 = 'Stock1'; 
$('td.name').filter(function(){ 
    return this.textContent.indexOf(var1) != -1; 
}).closest('tr').find('.price').html(data); 

---

Согласно комментарию, теперь вы возвращаете массив. Поэтому необходимо перебрать объект data и запрограммировать нужный элемент.

var data = [{ 
    name: "Stock1", 
    price: "$12" 
}, { 
    name: "Stock2", 
    price: "$15" 
}] 
$.each(data, function(_, d){ 
    $('td.name').filter(function() { 
     return this.textContent.indexOf(d.name) != -1; 
    }).closest('tr').find('.price').html(d.price); 
}) 

DEMO

Answer 2

success: function(data) { 
    $('.name').each(function(index, element) { 
    if ($(element).html().indexOf("Stock1") != -1) { 
     $(element).closest('tr').find('.price').html(data); 
    } 
    } 
} 

Answer 3

Используйте следующий код в методе успеха, предполагая данные будут в формате указанной ниже.

success:function(data) 
     // Assigning dummy values for assumption 
     var data = [{ 
     stockName: "Stock1", 
     price: "$12" 
     }, { 
     stockName: "Stock2", 
     price: "$15" 
     }] 
    // Iterating throw all td which has name [class] elements 
     $(".name").each(function(i, obj) { 
     // Dummy Validation as per the mock data to repalce the data as per the stockName 
     if ($(this).closest('tr').find('.name').text().trim() === data[i].stockName){ 
      $(this).closest('tr').find('.price').html(data[i].price); 
     } 
     }) 
}); 

FIDDLE

Answer 4

Текущая реализация не может работать правильно, если у Вас есть несколько Stocks присутствуют на вашей странице. Поэтому я предлагаю вам немного изменить код на стороне сервера, чтобы вернуть имя узла (например, Stock1), а также его цену. Так что ваш успех ajax data будет содержать 2 компонента; как data.name и data.price.первый один привыкнет к целевой DOM тд, а затем один будет использоваться для установки текста цены следующим образом:

Для Stock1:

$(document).ready(function(){ 

    $.ajax({ 
     url: "someBaseURL?name=Stock1" 
     success: function(data) { 
      var name = data.name; //grab the stock name 
      var price = data.price; //grab the stock price 
      //iterate over all the names and target the one associated 
      $('.name').each(function(){ 
       if($.trim($(this).text()).indexOf(name) != -1) 
        $(this).closest('tr').find('.price').html(price); 
      }); 
     } 
    }); 
});