Sets td Wert auf einem anderen td Namen von Ajax-basierten

Question

Ich habe folgende Tabelle structre:

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

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

    </td> 
</tr> 

Basierend auf dem Namen stock1 und stock2, ich brauche den entsprechenden Preis in den nächsten td einzustellen. Ich bin Web Abkratzen der Preis durch Ajax und versuchen, den Wert wie folgt festzulegen:

Für 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); 
       } 
      } 
    }); 
}); 

In diesem Szenario this nicht funktioniert, was ich erwarte das td Tag sein mit der Klasse name, wobei der Wert Stock1 ist. Wenn ich this durch ".name" ersetze, funktioniert der Code nur, wenn es eine name td gibt. Wenn ich zwei td Tags mit der Klasse name habe, funktioniert es nicht.

Ich muss dies tun, sobald das Dokument geladen wird, und nicht auf ein Ereignis wie Mausklick oder Hover.

Answer 1

this bezieht sich nicht auf td.name Element noch table.

Die :contains() Selector wählt alle Elemente, die den angegebenen Text enthalten die td zum Ziel und kann dann Gebrauch verwenden DOM Beziehung sofort folgendes Ziel td.next() Verwendung Geschwister.

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

oder

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

Sie können auch .filter()

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

---

Wie pro Kommentar verwenden jetzt ein Array zurückkehren. Also müssen Sie das Objekt data iterieren und das gewünschte Element anvisieren.

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

Verwenden Sie den folgenden Code in Erfolgsmethode, erwähnt in dem folgenden Format wäre es, die Daten übernehmen.

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

Die aktuelle Implementierung nicht richtig funktionieren, wenn Sie auf Ihrer Seite vorhanden sind mehrere Bestände haben. Also werde ich vorschlagen, dass Sie Ihren Server-Seitencode ein wenig ändern, um den Knotennamen (wie Stock1) sowie seinen Preis zurückzugeben. Damit Ihr Ajax-Erfolg data 2 Komponenten hat; wie data.name und data.price.erste wird zum Ziel DOM td gewöhnungs und später wird man verwendet werden, um den Preis Text wie folgt festzulegen:

Für 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); 
      }); 
     } 
    }); 
});