使用 Jquery 显示另一个 Div 中的动态 Div 数

Display dynamic number of Divs inside another Div using Jquery

本文关键字：Div 动态 使用 显示 另一个 Jquery      更新时间：2023-09-26

我开发了以下JavaScript代码， 

for (var x = 0; x < address.length; x++) { 
    var dynamic_address = "<div class='col-lg-6 col-md-6 col-sm-6 col-xs-12 mob-no-pad'>" +
        "<div class='address-blk'><span>1</span><p class='store-name'>" + storename[x] + ",</p>" +
        "<address>" + address[x] + "</address>" +
        "<p>Sent to : <a href=''>Email</a> | <a href=''>Text</a> | <a href=''>Get directions</a></p> </div></div>";   
    $("#location-address").html(dynamic_address);           
} 

<div id="location-address"></div>

我的问题是，当我运行此代码时，地址数组的最终地址和storename数组的最终值显示在位置地址div中（只有一个div）。Address.length 具有动态值。如何显示所有三个（任何数字）div，而不仅仅是一个div？

问题是因为你使用的是 html() 方法，该方法将覆盖元素中的任何先前值，因此只显示循环的最后一个元素。您需要改用append()：

$("#location-address").append(dynamic_address);

如果需要，您可能还需要在运行循环以更新内容之前使用 empty() 清除#location-address的内容。

var dynamic_address="";
for (var x = 0; x < address.length; x++) { 
     dynamic_address += "<div class='col-lg-6 col-md-6 col-sm-6 col-xs-12 mob-no-pad'>" +
        "<div class='address-blk'><span>1</span><p class='store-name'>" + storename[x] + ",</p>" +
        "<address>" + address[x] + "</address>" +
        "<p>Sent to : <a href=''>Email</a> | <a href=''>Text</a> | <a href=''>Get directions</a></p> </div></div>";   
} 
 $("#location-address").html(dynamic_address);
相关文章：