jquery函数.html .text在.each中调用ajax时不起作用答案

【问题标题】：jquery function .html .text not working when ajax call inside .eachjquery函数.html .text在.each中调用ajax时不起作用
【发布时间】：2020-01-20 04:43:34
【问题描述】：

我正在使用 jquery ajax 函数从服务器获取数据，然后循环遍历数组并更新 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 可以更新字符串“更新成功”但不能在 html 元素中插入 val。

我的html元素

     <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>

任何帮助将不胜感激，谢谢

【问题讨论】：

你能显示console.log(val)中的内容吗？
在帖子里更新了兄弟。
你能发布你的成功回复吗？
console.log(data[index]); 时你会得到什么
@Leong 老实说，我看不出有什么问题。你认为你可以创建一个 jsfiddle 页面来展示你的问题吗？

标签： javascript jquery ajax

【解决方案1】：

您正在做的是替换所有具有return_balance类的元素的文本

假设您从 API 和屏幕截图中获取数据，您可以编写类似的内容

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

如果您仍然没有得到所需的输出，只需发布您在此之后得到的错误和输出

【讨论】：

你好现在可以获取数据了，谢谢，这是什么根本原因？谢谢

【解决方案2】：

为您要使用结果更新的每个 span 元素指定一个 ID。然后按 ID 选择每个跨度。

您的代码只是在每次迭代中更新所有元素。因此，当然，您只会在任何地方看到最后更新的值。

 $.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>

【讨论】：

【解决方案3】：

这是因为您使用“return_balance”类更改了所有跨度的文本。最后返回的 val 是 0，所以 all 的最终值也是 0。虽然您发布的结果有一个 '1102.07' 对吗？

【讨论】：

他的问题是根本没有显示 val。检查他代码中的注释
@TreeNguyen，你为什么投反对票？他的代码没有错误，看来他的逻辑也有问题。