javascript - Jquery 分配 data-id，第一个值未定义

Question

目前我有这样的代码，当我单击按钮时，它会将按钮的值附加到新的段落标记中，同时还会使用计数为每个标记分配一个数据 ID。

   var count = 1;
   buttonValue = ($(this).val());
   var buttons = $( ".button-values" );
   buttonPara = $(".button-values p");
   var addData = $('<p>'+buttonValue+'</p>').attr('data-id', count++);
   addData.appendTo(buttons);
   var dataCount = buttonPara.last().attr('data-id');
   console.log(dataCount);   

但是，当我查看控制台时，第一个项目显示为未定义，然后第二个项目显示为 1，然后是下一个 2 等等...

然而，p 标签本身被分配了正确的数据 ID 号，我不确定为什么会发生这种情况？

如有任何帮助，我们将不胜感激。

Answer 1

首先你得到p的集合:

buttonPara = $(".button-values p");

然后添加新的p:

var addData = $('<p>'+buttonValue+'</p>').attr('data-id', count++);
addData.appendTo(buttons);

然后，您可以从添加最新 p 之前生成的集合中获取最后一个 p:

var dataCount = buttonPara.last().attr('data-id');

当您向页面添加元素时，buttonPara 变量不会自动更新。尝试更换

var dataCount = buttonPara.last().attr('data-id');

与

var dataCount = $(".button-values p").last().attr('data-id');