Używam poniżej kodu, aby dołączyć niektóre dane, które dostają się z API

for (i = 0; i < d.length; i++) {
    //alert(d[i].food_name);
    $('#myModal .modal-body').append("<span>" + 
          d[i].food_name + "</span><span>" + 
          d[i].redeem_code + "</span><span 
          class='food_price'>" + d[i].food_price + " 
         </span><span class='food-check'><input value=" + 
          d[i].food_id + " type='radio' redeem=" + 
          d[i].redeem_code + " food-price=" + 
          d[i].food_price + " food_name="+ d[i].food_name 
          + " name='food' class='select'></span><br>");
}

Gdy interfejs API trafi w drugą stronę, stare dane są również wyświetlane z nowymi danymi. Aby rozwiązać to próbowałem z .html(), ale używając tego jedynego ostatniego rekordu. Proszę pomóż. Nie dostać go.

2
Sagar Kodte 4 czerwiec 2018, 13:09

4 odpowiedzi

Najlepsza odpowiedź

Musisz wyczyścić HTML przed wejść do pętli. Utrzymuj więc dołączenie, ale użyj poniższych przed pętla:

$('#myModal .modal-body').empty();

Zobacz Ten przykład JSFiddle jako przykład.

3
anothershrubery 4 czerwiec 2018, 10:20

Możesz użyć Metoda replaceWith(), zastępuje wybrane elementy z nową zawartością.

Musisz przechowywać HTML w zmiennej podczas iteracji i może wymienić element.

let html = '';
for (i = 0; i < d.length; i++) {
    html += `<span> ${d[i].food_name} </span>
            <span> ${d[i].redeem_code}</span>
            <span class='food_price'> ${d[i].food_price} </span>
            <span class='food-check'>
                <input value=" ${d[i].food_id} type='radio' redeem='${d[i].redeem_code}' food-price= ${d[i].food_price} food_name="${d[i].food_name} name='food' class='select'>
            </span>
        <br>`
}
$('#myModal .modal-body').replaceWith(html);
0
Kiran Shahi 4 czerwiec 2018, 10:30

Użyj .html("") zamiast .html(), aby usunąć UnerHTML wybranego DOM.

I o twoim pytaniu.

Var newHtml=" ";
For(loop)
{
newHtml= newHtml+ "your data[i]";
}
OldHtml.html(" ");

OldHtml.html(newHtml);

Powyższy kod dołączy nowe dane do HTML.

1
mohsen solhnia 4 czerwiec 2018, 10:36

Użyj. Peady () do opróżnienia zawartości w elemencie

$('#myModal .modal-body').empty().append()
2
Akhil Aravind 4 czerwiec 2018, 10:20