使用JS/JQuery遍历嵌套数组生成页面元素的问题求助

你需要遍历嵌套数组imgRef，为每个子数组生成包含<img>和<p>的<div>并追加到#localImg元素中。原代码未生效的核心原因是直接将子数组作为文本赋值给div，无法生成目标HTML结构。

首先修正数组的语法错误（字符串需加引号，否则运行时会报错）：

var imgRef = [
  ["http://127.0.0.1:5555/images/imgf0002.png", "fig number 1"],
  ["http://127.0.0.1:5555/images/imgf0012.png", "fig number 12"]
];

以下是两种可行的解决方案：

方案一：分步构建元素 #

$.each(imgRef, function(index, item) {
  // 创建容器div
  var $container = $('<div></div>');
  // 创建img标签并绑定src属性
  var $img = $('<img>', { src: item[0] });
  // 创建p标签并设置文本内容
  var $title = $('<p>').text(item[1]);
  // 将元素依次追加后插入到目标容器
  $container.append($img).append($title).appendTo('#localImg');
});

方案二：链式调用简化代码 #

$.each(imgRef, function(index, item) {
  $('<div>')
    .append($('<img>', { src: item[0] }))
    .append($('<p>').text(item[1]))
    .appendTo('#localImg');
});

原代码问题分析 #

原代码中'text': value会将子数组value强制转换为字符串（如"http://127.0.0.1:5555/images/imgf0002.png, fig number 1"），最终只会生成显示该字符串的div，而非你需要的嵌套HTML结构。

内容的提问来源于stack exchange，提问作者SirThanksALot