如何从jQuery each()中获取元素列表并拼接HTML用于AJAX请求

我来帮你搞定这个问题～你现在的代码里，每次遍历.module-added都会覆盖变量值，所以最后只会得到最后一个图片的内容，也没处理<br />的拼接。咱们调整下代码逻辑，就能轻松实现需求：

核心思路 #

1. 先准备一个容器（数组）来存储每个图片的完整标签代码
2. 遍历每个.module-added元素，提取里面的<img>完整HTML
3. 用<br />把所有图片标签连接成一段完整的HTML片段
4. 把这段片段同时用于更新页面和作为AJAX请求的参数

修改后的完整代码 #

$(function() {
  $("button").click(function(){
    // 初始化数组存储每个img的完整HTML代码
    const imgHtmlList = [];
    
    $('.module-added').each(function(){
      // 获取当前div内img标签的完整HTML（包含标签本身及所有属性）
      const singleImgHtml = $(this).find('img').prop('outerHTML');
      imgHtmlList.push(singleImgHtml);
    });
    
    // 用<br />拼接所有img标签，形成最终的HTML片段
    const $BIG_CHUNK_O_HTML = imgHtmlList.join('<br />');
    
    // 更新页面上的#links容器内容
    $('#links').html($BIG_CHUNK_O_HTML);
    
    // 发送AJAX请求
    $.ajax({
      method: 'POST',
      url: 'temp.php',
      datatype: 'json',
      data: {
        page_title: 'A new mockup',
        modules: $BIG_CHUNK_O_HTML // 传入拼接好的HTML片段
      },
      success: function(data){
        alert(data);
      }
    });
  });
});

关键细节说明 #

• $(this).find('img').prop('outerHTML')：这个方法能拿到<img>标签的完整代码（包括id、src等所有属性），而不是只获取内部内容
• imgHtmlList.join('<br />')：数组的join方法会自动用指定字符串连接所有元素，既保证了图片间的换行，又不会在最后一张图片后多出多余的<br />
• 统一使用拼接好的$BIG_CHUNK_O_HTML，保证页面显示和AJAX发送的内容完全一致

这样修改后，你就能得到包含4张图片且每张间带换行的HTML片段，顺利传给后端啦～

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