JavaScript：增加名称属性的数量

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

当XML包含多个项目（即歌曲）时，它会创建相应的HTML，但

输入

元素的

名称

属性保持不变

这是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>

---

如何做到这一点？非常感谢您的建议。

可以使用

每个回调的索引参数：

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

     var html = '<div...> <span..><input name="title['+ i +']" value="' + title + '" /></span>'

});

$（d）.查找（'song'）。每个（函数（i）{
var html=''
});
您可以编写

title[]
取而代之的是
title[1]

和服务器自动设置索引。
这是怎么回事：

var idx = 0;
$(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[' + idx + ']" value="' + title + '" /></span>';
    html += '<span id="artist"><input type="text" name="artist[' + idx + ']" value="' + artist + '" /></span>';
    html += '<span id="price"><input type="text" name="price[' + idx + ']" value="' + price + '" /></span>';
    html += '<span id="currency"><input type="text" name="currency[' + idx + ']" value="' + currency + '" /></span>';
    html += '</div>';

    $('#mySongs').append($(html));
    idx++;
});

var idx=0；
$（d）.find（'song'）.each（函数（）{
var$song=$（这个）；
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=''；
html+=''；
html+=''；
html+=''；
html+=''；
$（'#mySongs'）。追加（$（html））；
idx++；
});
为什么？只需拥有
.each（函数（idx））
@Ricardo Pontul这也有效。我刚刚测试了它。非常感谢你，Ricardo！@Ricardo Pontul嗨，Ricardo，我没有否决投票。我仍然没有否决或否决投票的权利。@charlietfl很有魅力。谢谢你的帮助！这一切都很好。@Artemiy StagnantIce Alexeew是的，这是一个很好的选择一个。谢谢。我已经试过了，但现在我需要HTML中的分子（至少目前是这样）
$(d).find('song').each(function(i) {

     var html = '<div...> <span..><input name="title['+ i +']" value="' + title + '" /></span>'

});

var idx = 0;
$(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[' + idx + ']" value="' + title + '" /></span>';
    html += '<span id="artist"><input type="text" name="artist[' + idx + ']" value="' + artist + '" /></span>';
    html += '<span id="price"><input type="text" name="price[' + idx + ']" value="' + price + '" /></span>';
    html += '<span id="currency"><input type="text" name="currency[' + idx + ']" value="' + currency + '" /></span>';
    html += '</div>';

    $('#mySongs').append($(html));
    idx++;
});