jquery - 为 p 标签分配属性 id 它不起作用

我试图从数组中获取id名称，并尝试将id名称分配给每个p标签，当我单击按钮时，这些p标签会动态附加，html是:

<html>
<body>
    <div id="container">
        <button id="button">Add new div</button>
    </div>
</body>
</html>

脚本是:

$(document).ready(function () { 
    $('#button').click(function(){ 
        var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'},];
        $.each(data, function(val) { 
            var light=$('<p></p>'); 
            light.attr('id',+val.id); 
            light.text('one'); 
            $("#container").append(light);
        }); 
    }); 
});

code is here

最佳答案

更改为:

$(document).ready(function () {
    $('#button').click(function() {
        var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'},];
        $.each(data, function(i, val) { // added index parameter
            var light=$('<p></p>');
            light.attr('id', val.id);   // removed '+'
            light.text('one');

            $("#container").append(light);
        });
    });
});

另请参阅updated jsfiddle .

===更新===

var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'},];
var position = 0;

$(document).ready(function () {
    $('#button').click(function() {
        var light=$('<p></p>')
            .attr('id', data[position].id)
            .text('one');
        $("#container").append(light);
        position++;
        position %= data.length;
    });
});

另请参阅我的updated jsfiddle .

关于jquery - 为 p 标签分配属性 id 它不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8485778/