动态自定义属性未显示

Posted 2023-05-09

【中文标题】动态自定义属性未显示

【英文标题】：Dynamic custom Attribute not showing

【发布时间】：2014-06-16 15:26:46

【问题描述】：

我有以下代码，它是动态循环的一部分，并创建了一个具有 1 列和 4 行的新网格。第四行有一个按钮：

var elem = $(this,'a[data-itemid]');
$(elem).prop('data-itemid', '"'+value+'"');
console.log($(elem).prop('data-itemid'));
console.log(elem);

使用开发者控制台，绘制方式如下：

<a data-role="button" name="orderButton" dsid="orderButton" class="menuMaster_orderButton    ui-link ui-btn ui-btn-b ui-icon-none ui-btn-icon-nowhere ui-shadow ui-corner-all" id="menuMaster_orderButton" data-corners="true" data-icon="none" data-iconpos="nowhere" data-mini="false" data-theme="b" tabindex="7" role="button">Order!</a>

当它循环遍历每条记录时，我有上面的代码，它应该添加一个名为“data-itemid”的新属性和一个值。在这一行：

console.log($(elem).prop('data-itemid'));

它给了我正确的价值。所以我知道它正在添加新属性。但我不认为它会添加它，因为我根本找不到它。

console.log(elem);

这给了我：

[Window, jquery: "1.9.1", constructor: function, init: function, selector: "", size: function…]

哪个不是元素:(

更新：

这是我在循环中使用的按钮：

$(this,'a[name=orderButton]').data('itemid', value);

这是用于在点击时获取它的内容：

console.log('itemid= '+$(this, 'a[name=orderButton]').data('itemid'));

以上返回未定义。

【问题讨论】：

console.log(elem); 打印出上述值，因为它是一个 jQuery 对象……你可以试试console.log(elem[0]);

【参考方案1】：

jQuery 将所有data 属性存储在内存中的对象中以提高性能。在 DOM 加载后添加到元素的任何属性都仅存储在此对象中，并且不会在 html 源中可见。

您可以通过使用data() 检索data 属性来验证它是否已设置。请勿使用prop('data-x') 或attr('data-x');，因为以上原因不保证属性存在，而且速度较慢。

考虑到这一点，您的第一个示例应该是：

var elem = $(this,'a[data-itemid]');
$(elem).data('itemid', value);
console.log($(elem).data('itemid'));
console.log(elem);

【讨论】：

我遇到了同样的问题，因为它显示在控制台中，但没有显示在要检索它的元素中。

这不是问题 - 这就是它的工作原理。设置使用$el.data('foo', 'bar');获取使用x = $el.data('foo');

好的，但它没有显示在渲染的 元素中，但它显示在控制台中 console.log($(this, 'a[data-itemid).data('itemid')); 当我单击按钮 () 时，当我尝试找回它。

当您在处理程序中引用 this 时，我不确定您为什么要使用上下文选择器。试试：$(this).data('itemid', value);

如果它在点击处理程序中，this 将是选择器匹配的元素。