Question

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

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

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

和服务器自动设置索引。

Answer 2

可以使用each回调的索引参数：

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

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

});

Answer 3

这个怎么样：

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++;
});

JavaScript：为name attr添加越来越多的数字

3 个答案: