代码之家 › 专栏 › 技术社区 › andrew

使用链接创建具有数据属性的元素

custom-data-attribute jquery

andrew · 技术社区 · 10 年前

我想通过使用 jQuery.data

因此,在这里的示例中,我想创建:

<div data-test="test">test</div>

我尝试了:

$("<div>").data(this, 'test','test').append('test').appendTo('body');

没有成功,有可能吗?

这是一个 fiddle 玩

3 回复 | 直到 10 年前

Lix 10 年前

您还可以在同一函数调用中为新创建的元素设置属性(和内容):

$( '<div>', { 
  'data-test': 'test',
  'text': 'test'
} ).appendTo( 'body' );

这段代码应该会产生类似的结果:

<body>
  <div data-test="test">test</div>
</body>

apsillers 10 年前

的数据设置变体 .data 只接受两个参数,一个键和一个值(而数据获取变量只接受一个参数)。删除第一个参数 数据 .

$("<div>").data('test','test').append('test').appendTo('body');

注意jQuery的 data 未设置 data- 属性;它将值存储在一个内部查找表中,该表可通过获取对 数据 。如果您真的需要设置 数据- 属性(例如,为了与其他需要的非jQuery代码兼容),可以使用 .attr :

$("<div>").attr('data-test','test').append('test').appendTo('body');

注意 数据 变量可以存储任意值(因为它使用内部字典),而 .属性 解决方案只能存储字符串(因为它使用属性值)。

Slippery Pete 10 年前

.data() 只接受两个参数,key和value: http://api.jquery.com/data/

$("<div>").data('test','test').append('test').appendTo('body');

推荐文章

Ellio_Smoov · 使用通过自定义数据属性检索的选择器在音频播放上显示目标div

7 年前

ÐÐ°ÑÐ¸Ñ · 数据表。js:如何通过分页循环表中的行,访问单元格的自定义数据属性并在其中设置自定义html

7 年前

LeBlaireau · Jquery-使用数据属性选择父项

7 年前

fefe · Vuejs有条件地附加数据属性

7 年前

Francesca · 使用jQuery添加数据变量

9 年前

Adam · 使用javascript从本地存储中删除

10 年前

andrew · 使用链接创建具有数据属性的元素

10 年前

Ben · 如何将span元素的HTML设置为自定义数据属性的内容?

12 年前