Jquery 为p标记分配属性id'；它不工作了_Jquery

Jquery 为p标记分配属性id'；它不工作了

jquery

Jquery 为p标记分配属性id'；它不工作了,jquery,Jquery,我尝试从数组中获取id名称，并尝试将id名称分配给每个p标记，当我单击按钮时，这些p标记会动态追加，html为： <html> <body> <div id="container"> <button id="button">Add new div</button> </div> </body> </html> 添加新div 脚本是： $(document).rea

我尝试从数组中获取id名称，并尝试将id名称分配给每个p标记，当我单击按钮时，这些p标记会动态追加，html为：

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


添加新div

脚本是：

$(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);
        }); 
    }); 
});

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
var data=[{'id'：'user1'}，{'id'：'user2'}，{'id'：'user3'}，{'id'：'user4'}，{'id'：'user5'}，]；
$.each（数据，函数（val）{
var light=$（'p>'）；
灯光属性（'id'，+val.id）；
轻文本（“一”）；
$（“#容器”）。附加（轻）；
}); 
}); 
});

删除+val.id之前的加号（+）

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

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

您使用的是

每个回调函数的第一个参数，它是索引，第二个参数是值本身
$(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);
          });  
  });
});

$（文档）.ready（函数（）
{
$（“#按钮”）。单击（函数（）{
var data=[{'id'：'user1'}，{'id'：'user2'}，{'id'：'user3'}，{'id'：'user4'}，{'id'：'user5'}]；
$.each（数据、函数（索引、值）{
var light=$（'p>'）；
light.attr（'id'，索引）；
light.text（value.id）；
$（“#容器”）。附加（轻）；
});  
});
});

以下是工作版本：
更新
$(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");

          });  
  });
});

$（文档）.ready（函数（）
{
$（“#按钮”）。单击（函数（）{
var data=[{'id'：'user1'}，{'id'：'user2'}，{'id'：'user3'}，{'id'：'user4'}，{'id'：'user5'}]；
$.each（数据、函数（索引、值）{
$（“”{
id:索引，
text:value.id
}).附于（“容器”）；
});  
});
});

代码：
更改为：
$(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);
        });
    });
});

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
var data=[{'id'：'user1'}，{'id'：'user2'}，{'id'：'user3'}，{'id'：'user4'}，{'id'：'user5'}，]；
$.each（数据，函数（i，val）{//添加了索引参数
var light=$（'p>'）；
light.attr（'id'，val.id）；//删除了'+'
轻文本（“一”）；
$（“#容器”）。附加（轻）；
});
});
});

另请参阅
==更新===
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;
    });
});

var data=[{'id'：'user1'}，{'id'：'user2'}，{'id'：'user3'}，{'id'：'user4'}，{'id'：'user5'}，]；
var位置=0；
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
var light=$（“”）
.attr（'id'，数据[位置].id）
.文本（“一”）；
$（“#容器”）。附加（轻）；
位置++；
位置%=数据长度；
});
});

另请参见我的。
使用以下内容
  $.each(data, function(val,value) {            
      var light=$('<p></p>');
      light.attr('id',+value.id);
      light.text('one');  

$。每个（数据、函数（val、值）{
var light=$（'p>'）；
light.attr（'id'，+value.id）；
轻文本（“一”）；
您必须将$each更新为$each（数据、函数（索引、val）…实际上，您正在使用每个项目的索引，这就是为什么id值总是很小的原因。当我单击按钮时，有办法一个一个地添加p标记，这很好。但我只是简化了一点。请参阅更新。我尝试了这段代码。它工作正常。请帮助我在单击按钮时一个一个地添加p标记。非常好，谢谢，我想要这只是再次感谢你这么多：）我尝试了它的工作很好，帮助我添加一个接一个的p标签，当我点击按钮