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

在jQuery中：

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

简单的JavaScript：

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

您还可以通过以下方式获取div的内容：

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

或者：

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

Answer 2

问题是$.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 3

您可以使用JQuery的eq函数迭代每个div的ID，请查看jsfiddle.net。
要使用eq函数，首先使用JQuery选择器，结果是JQuery对象：

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

然后使用如下的eq函数：

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

在jquery中使用for循环替换div的内容

3 个答案: