Question

我正在尝试从数组中获取id名称并尝试为每个p标签分配id名称，当我单击按钮时，动态追加，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

Answer 1

你正在使用each回调的第一个参数，它是索引，第二个参数是值本身。

$(document).ready(function ()
{
  $('#button').click(function(){
          var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'}];
          $.each(data, function(index, value) {            

          var light=$('<p></p>');
          light.attr('id', index);
          light.text(value.id);       
          $("#container").append(light);
          });  
  });
});

以下是工作版：http://jsfiddle.net/Hppfg/8/

<强>更新

$(document).ready(function ()
{
  $('#button').click(function(){
          var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'}];
          $.each(data, function(index, value) {            

              $('<p></p>', {
                  id : index,
                  text: value.id
              }).appendTo("#container");

          });  
  });
});

代码：http://jsfiddle.net/Hppfg/15/

Answer 2

更改为：

$(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。

=== UPDATE ===

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。

Answer 3

删除+ val.id

之前的加号（+）

在每个回调中添加另一个参数，第一个参数是索引，第二个是值;

$.each(data, function(index,val) {
    ...
});

Answer 4

使用以下

  $.each(data, function(val,value) {            
      var light=$('<p></p>');
      light.attr('id',+value.id);
      light.text('one');

为p标签分配属性ID它不起作用

4 个答案: