使用jQuery将数量不定的递归<div>导出为字符串或XML

我帮你排查下代码里的问题，你生成的XML为空主要是几个关键错误导致的，咱们一步步来修复：

核心问题总结 #

1. 异步执行导致返回值未更新：你在formToXml里嵌套了$(function(){...})（DOM就绪回调），这个回调会在函数返回之后才执行，所以最终返回的outdata还是初始的空骨架XML，根本没加上受益人数据。
2. 选择器错误：
   • 你用$('div.Beneficiary:first')只选中了第一个受益人容器，没有遍历所有的；
   • $mainDiv.nextAll().children('div.beneficiary')里的类名写错了（HTML里是大写B的Beneficiary，这里写成小写b），而且选择器逻辑完全没必要绕弯，直接选中所有.Beneficiary元素就行；
   • 遍历字段时的选择器$benDiv.nextAll().children('.field')也是错的，应该在每个受益人容器内部查找字段。
3. 取值逻辑错误：你用全局的$fieldInput.val()获取值，没有对应到当前遍历的字段，导致每个字段都取同一个值（甚至是错误的值）。

修复后的完整代码 #

function downloadData(contentType, data, filename) {
    var link = document.createElement("A");
    link.setAttribute("href", encodeURI("data:" + contentType + "," + data));
    link.setAttribute("style", "display:none");
    link.setAttribute("download", filename);
    document.body.appendChild(link); // needed for firefox
    console.log(link.outerHTML);
    link.click();
    setTimeout(function() {
        document.body.removeChild(link);
    }, 1000);
}

function formToXml(form) {
    var outdata = '<?xml version="1.0"?>';
    outdata += '<Beneficiaries>';

    // 遍历所有带Beneficiary类的容器
    $('.Beneficiary').each(function() {
        outdata += '<Beneficiary>';
        // 在当前受益人容器内查找所有.field元素
        $(this).find('.field').each(function() {
            var $currentField = $(this);
            var fieldName = $currentField.attr('name');
            var fieldValue = $currentField.val();
            
            // 把字段名转换成首字母大写的格式（比如"Applies to" → "Applies To"）
            var tagName = fieldName.replace(/\b\w/g, char => char.toUpperCase());
            
            // 转义XML特殊字符，避免格式错误
            fieldValue = fieldValue.replace(/&/g, '&amp;')
                                   .replace(/</g, '&lt;')
                                   .replace(/>/g, '&gt;')
                                   .replace(/"/g, '&quot;')
                                   .replace(/'/g, '&apos;');
            
            outdata += `<${tagName}>${fieldValue}</${tagName}>`;
        });
        outdata += '</Beneficiary>';
    });

    outdata += '</Beneficiaries>';
    return outdata;
}

function download(frm) {
    var data = formToXml(frm);
    console.log(data);
    downloadData("text/xml", data, "export.xml");
}

关键修改说明 #

• 移除异步回调：直接同步执行XML拼接逻辑，确保返回的是完整的内容；
• 正确遍历容器：用$('.Beneficiary').each()遍历所有受益人，每个容器独立处理；
• 精准获取字段：在每个受益人容器内用find('.field')查找字段，保证字段归属正确；
• 动态取值：用$(this)获取当前遍历的字段，确保每个字段的名称和值对应正确；
• 标签名格式化：通过正则把字段名转换成首字母大写的格式，匹配你期望的XML标签样式；
• XML转义处理：添加特殊字符转义，避免生成的XML因为包含&、<等字符而格式错误。

现在你再测试一下，填写表单后调用download函数，就能生成符合你需求的XML了。

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