在jquery中使用for循环替换div的内容[重复]

Question

我有一个页面包含几个 div 标签如下

<div id="dynamic_widget_466" class="dynamic_widget_466"></div>
<div id="dynamic_widget_468" class="dynamic_widget_468"></div>
<div id="dynamic_widget_464" class="dynamic_widget_464"></div>
<div id="dynamic_widget_462" class="dynamic_widget_462"></div>

我正在尝试使用 jquery 将这些 div 标签的所有值放入一个数组变量中，并将内容添加到这些 div 标签中。脚本如下

$(document).ready(function (){
    var dynaWidgets = [];
    dynaWidgets = document.querySelectorAll('div[id^="dynamic_widget_"]');
    for(var i=0; i<dynaWidgets.length; i++)
    {
        var dynaWidgetId = dynaWidgets[i].id;
        var widgetId = dynaWidgetId.substring(3).split('_')[2];
        console.log('The selected contentId  : ' + dynaWidgetId );
        $.ajax({  
            url: "${CONTEXTPATH}/widgets/dynamic-widget",
            type: "GET",
            data: {    
                contentId: widgetId
            },
            // the type of data we expect back
            dataType : "html",

            success: function( htmlData ) 
            {
                $('#' + dynaWidgetId).html(htmlData);
                console.log('The selected dynaWidgetId ' +i+ ' : ' + dynaWidgetId );
            },

            error: function( xhr, status, errorThrown ) {
                console.log( "Error: " + errorThrown );
                console.log( "Status: " + status );
                console.dir( xhr );
            },

            complete: function( xhr, status ) {
            },
        });
     }
});

即使我能够获取这些 div 中的值，内容也只会添加到最后一个 div。 请帮帮我。提前致谢

Answer 1

问题是$.ajax 是默认asynchronous，for 循环不会等待它完成。由于循环后dynaWidgetId 的值始终是最后一个 div id，因此只有最后一个 div 获得更新。

尝试使用闭包：

for(var i=0; i<dynaWidgets.length; i++) {
  (function(dynaWidgetId){
   ... your rest of the code for $.ajax
  })(dynaWidgets[i].id);
}

Answer 2

你可以使用jQuery的eq函数来遍历每个div的id，请看jsfiddle.net。
要使用 eq 函数，首先使用 JQuery 选择器，结果是 JQuery 对象：

dynaWidgets = $(document).find('div[id^="dynamic_widget_"]');

然后像这样使用 eq 函数：

var dynaWidgetId = dynaWidgets.eq(i)[0].id;

Answer 3

在 jQuery 中：

$("#myid")[0].innerHTML = "test";

在简单的 JavaScript 中：

document.getElementById("myid").innerHTML = "test";

你也可以通过调用获取div的内容：

var content = $("#myid")[0].innerHTML;

或者：

var content = document.getElementById("myid").innerHTML;