JavaScript:将递增的数字添加到名称属性

Question

我正在使用 JQuery 从从 XML 文件中提取的数据创建一个 HTML 表格。此数据将通过 HTTP POST 发布到其他地方。

当 XML 包含多个项目(即歌曲)时，它会创建相应的 HTML，但 input 元素的 name 属性保持不变。

这是 JQuery 代码:

<script type="text/javascript">
$(document).ready(function() {

        $.get('test.xml', function(d){
        $('body').append('<form id="myForm" action="http://myendpoint.xyz/test" method="post" target="_blank" />');
        $('#myForm').append('<div id="mySongs" />');
        $('#mySongs').append('<input type="submit" value="Submit">');

        $(d).find('song').each(function() {

            var $song = $(this); 
            var title = $song.find('title').text();
            var artist = $song.find('artist').text();
            var price = $song.find('price').text();
            var currency = $song.find('currency').text();

            var html = '<div id="mySongs"> <span id="title"><input type="text" name="title" value="' + title + '" /></span>';
            html += '<span id="artist"><input type="text" name="artist" value="' + artist + '" /></span>';
            html += '<span id="price"><input type="text" name="price" value="' + price + '" /></span>';
            html += '<span id="currency"><input type="text" name="currency" value="' + currency + '" /></span>';
            html += '</div>';

            $('#mySongs').append($(html));

        });
    });
});
</script>

提取 XML 数据并运行上述代码后生成的 HTML 代码目前看起来是这样的:

<form id="myForm" action="http://myendpoint.xyz/test" method="post" target="_blank">
<input type="submit" value="Submit">
    <div id="mySongs">  
        <span id="title">
            <input type="text" name="title" value="Song Number 1"></span>
        <span id="artist">
            <input type="text" name="artist" value="Artist Number 1"></span>
        <span id="price">
            <input type="text" name="price" value="25.00"></span>
        <span id="currency">
            <input type="text" name="currency" value="EUR"></span>
    </div>
    <div id="mySongs">
        <span id="title">
            <input type="text" name="title" value="Song Number 2"></span>
        <span id="artist">
            <input type="text" name="artist" value="Artist Number 2"></span>
        <span id="price">
            <input type="text" name="price" value="30.00"></span>
        <span id="currency">
            <input type="text" name="currency" value="USD"></span>
    </div>
</form>

我想在 name 属性中添加一个递增的数字，这样当拉取多个项目时，代码会显示相应的数字来识别它(例如:name="title [1]")。

我希望 HTML 看起来如下所示:

<form id="myForm" action="http://myendpoint.xyz/test" method="post" target="_blank">
<input type="submit" value="Submit">
    <div id="mySongs">  
        <span id="title">
            <input type="text" name="title[1]" value="Song Number 1"></span>
        <span id="artist">
            <input type="text" name="artist[1]" value="Artist Number 1"></span>
        <span id="price">
            <input type="text" name="price[1]" value="25.00"></span>
        <span id="currency">
            <input type="text" name="currency[1]" value="EUR"></span>
    </div>
    <div id="mySongs">
        <span id="title">
            <input type="text" name="title[2]" value="Song Number 2"></span>
        <span id="artist">
            <input type="text" name="artist[2]" value="Artist Number 2"></span>
        <span id="price">
            <input type="text" name="price[2]" value="30.00"></span>
        <span id="currency">
            <input type="text" name="currency[2]" value="USD"></span>
    </div>
</form>

如何实现？非常感谢任何建议。

Answer 1

你可以写

title[] 而不是 title[1]

和服务器自动设置索引。