javascript - Jquery - 导出无限递归到字符串或 XML

Question

我有一个问题让我有点头疼了一段时间，我希望有人能提供帮助。我看过各种问题，包括但不限于：

javascript获取div内的所有输入，包括select和textarea

如何获取以已知文本开头的“div”中的所有元素

Javascript - 遍历元素的递归函数

但我一直无法弄清楚我到底需要什么。

对于一些背景知识，我需要从 Web 表单中获取信息，然后需要将其转换为 XML 格式才能读入另一个系统。会有无限数量的 Div，我的 HTML/XSL 片段可能如下所示：

<div class="Beneficiary">
    <div>
        <label for="field@code_TF01">Applies to</label>
        <select name="Applies to" id="field@code_TF01" required="required" class="field">
            <option id="field@code_TF01-1" value="Client 1">Client 1</option>
            <option id="field@code_TF01-2" value="Client 2">Client 2</option>
            <option id="field@code_TF01-3" value="Both">Both</option>
        </select>
    </div>
    <br/>
    <div>
        <label for="field@code_TF02">Full name</label>
        <input name="Full name" id="field@code_TF02" required="required" type="text" onfocus="buildPeopleList(this.id)" class="field"/>
    </div>
    <div id="field@code_TF03-container">
        <label for="field@code_TF03">Full Address</label>
        <textarea name="Full Address" id="field@code_TF03" required="required" class="field"/>
    </div>
    <br/>                           
</div>
<div class="Beneficiary">
    <div>
        <label for="field@code_TF11">Applies to</label>
        <select name="Applies to" id="field@code_TF11" required="required" class="field">
            <option id="field@code_TF11-1" value="Client 1">Client 1</option>
            <option id="field@code_TF11-2" value="Client 2">Client 2</option>
            <option id="field@code_TF11-3" value="Both">Both</option>
        </select>
    </div>
    <br/>
    <div>
        <label for="field@code_TF12">Full name</label>
        <input name="Full name" id="field@code_TF12" required="required" type="text" onfocus="buildPeopleList(this.id)" class="field"/>
    </div>
    <div>
        <label for="field@code_TF13">Full Address</label>
        <textarea name="Full Address" id="field@code_TF13" required="required" class="field"/>
    </div>
    <br/>                           
</div>

我想要得到的，无论是字符串还是 XML 格式是

<Benificiaries>
    <Beneficiary>
        <Applies To>Client 1</Applies To>
        <Full name>Name 1</Full name>
        <Full address>Address 1</Full address>
    </Beneficiary>
    <Beneficiary>
        <Applies To>Client 2</Applies To>
        <Full name>Name 2</Full name>
        <Full address>Address 2</Full address>
    </Beneficiary>
</Beneficiaries>

我已经尝试了几种方法，但无法做到这一点，我得到了各种结果，但我就是无法做到正确。我目前的功能是：

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){    
    <![CDATA[
        var outdata='<?xml version="1.0"?/>';
        outdata = outdata + '<Beneficiaries>';
        $(function(){                            
            var $mainDiv = $('form:first');   
            console.log('MainDiv'+$mainDiv);                       
            var $benDiv = $('div.Beneficiary:first');
            console.log('benDiv'+$benDiv);
            var $fieldInput = $('input');

            $mainDiv.nextAll().children('div.beneficiary').each(function (){
            outdata=outdata + '<Beneficiary>';
            $benDiv.nextAll().children('.field').each(function (){
                var newText = $fieldInput.val();
                var newName = $fieldInput.attr('name');
                outdata =outdata + '<'+newName+'>'+newText+'</'+newName+'>'
                });
                outdata = outdata + '</Beneficiary>';
            })                            
        })
    outdata = outdata + '</Beneficiaries>';
    return outdata;
    ]]>
    }

    function download(frm){

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

返回：

<?xml version="1.0"?/>
<Beneficiaries>
</Beneficiaries>

我不知道我是否错过了一些非常愚蠢的事情或以错误的方式去做，但我会很感激任何建议。

标签： javascriptjqueryhtml