Функция jquery. html .text не работает, когда ajax вызывает внутри .each

Question

Я использую функцию jquery ajax, чтобы получить данные с сервера, а затем l oop через массив и обновить элементы HTML.

Невозможно обновить возвращаемые данные.

$(document).delegate("#update_balance_btn", "click", function(event){

    $.ajax({
        url : base_url + "login/get_data",
        type : 'POST',
        success : function(data) {              
            $.each(JSON.parse(data) , function(index, val) { 
              $(".return_balance").text(val + " update success");
              //$('.return_balance').empty().append(val + " update success" );
              console.log(val);  // I can console log all the data 
              //$(".return_balance").html( val + " update success");  
// not wokirng , the val is not inserted to html , only " update success" is inserted 
            });
        },
        error : function(request,error){
            console.log(  JSON.stringify(request) );
        }
    });
});

Я могу получить данные после каждой функции, .html может обновить строку "успешно обновлено", но просто не могу вставить val внутри элемента html.

my html element

     <li class="list-group-item">1: <span class="return_balance"> 0 </span></li>
    <li class="list-group-item">2: <span class="return_balance"> 0 </span> </li>
    <li class="list-group-item">3: <span class="return_balance"> 0 </span> </li>
    <li class="list-group-item">4Casino : <span class="return_balance"> 0 </span> </li> 

любая помощь будет высоко оценена благодаря

Answer 1

Что вы делаете, вы заменяете текст всех элементов класса return_balance

Предполагая, что вы получаете данные из API и со скриншота, вы можете написать что-то вроде

$.each(JSON.parse(data) , function(index, val) { 
     $(".return_balance").eq(index).html(val + " update success");
});

Если вы все еще не получили желаемый вывод, просто опубликуйте ошибку и вывод, полученный после этого

Answer 2

Дайте идентификатор каждому span элементу, который вы хотите обновить с вашими результатами. Затем выберите каждый диапазон по идентификатору.

Ваш код просто обновляет все элементы в каждой итерации. Так что, конечно, вы увидите только последнее обновленное значение везде.

 $.each(JSON.parse(data) , function(index, val) { 
    $(".return_balance #" + index).text(val + " update success");
});


<li class="list-group-item">1: <span class="return_balance" id="1"> 0 </span></li>
<li class="list-group-item">2: <span class="return_balance" id="2"> 0 </span> </li>
<li class="list-group-item">3: <span class="return_balance" id="3"> 0 </span> </li>
<li class="list-group-item">4Casino : <span class="return_balance" id="4"> 0 </span> 
</li> 

Answer 3

Это потому, что вы изменили текст всего диапазона с классом return_balance. Последнее возвращаемое значение равно 0, поэтому конечное значение всех также равно 0. Хотя полученный вами результат имеет значение «1102,07», верно?