Question

I want to attach data attribute to element. My code is

 $('<a>', {
     class: 'like-comment 
             comment-like-color 
             comment_main_id_' + response.id,
     text: '', 
     href: 'javascript:;',
     }).appendTo(commentBody)
     .append($('<i>', {class: 'fa fa-thumbs-up'}));

My HTML data generated is like

<a class="like-comment comment-like-color 
          comment_main_id_{{$comment['id']}}" href="javascript:
          data-like-comment-id=" {{$comment[ 'id']}} ";">
    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>

There's a data (data-like-comment-id) attribute, which I want to create using jQuery. Could someone please help me with it.

Answer 1

$.fn.attr和$.fn.data之间的主要区别是：

$.fn.attr：直接在元素属性上存储信息/数据，这些信息/数据对于检查是可见的，并且可以通过元素的本机API获得。

$.fn.data：将信息存储在JQuery之外无法访问且封闭的位置

使用attr()设置的数据

可通过$(element).attr('data-name')访问
也可以通过element.getAttribute('data-name')访问
如果值形式为data-name，也可以从$(element).data(name)和element.dataset['name']和element.dataset.name来访问
在要检查的元素上可见
不能是对象

使用.data()设置的数据

只能通过.data(name)访问
无法通过其他任何地方访问
不公开可见以供检查
可以是对象

Source

在下面用于.attr()使用

$('elm').attr(attname,attvalue);

在使用data-前缀之前避免冲突

$('elm').attr('data-'+attname,attvalue);

在下面用于.data()

$('elm').data(attname,attvalue);

Answer 2

创建时给锚元素一个ID

$('<a id="foo"></a>'); // Simplified for brevity

然后您可以选择稍后添加$.data() function的数据属性：

const mycomment = "some value";
$("#foo").data("like-comment", mycomment);

Answer 3

使用attr属性

 $('<a>',{"class":'test',attr:{'prop':'value'}})

Answer 4

您可以在创建时将其添加到参数列表中。

 $('<a>', {
	class: 'like-comment comment-like-color comment_main_id_',
	text: '', 
	href: 'javascript:;',
	'data-like-comment-id': 'whatever'
}).appendTo(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或在使用.attr()之后添加它： http://api.jquery.com/attr/

$('<a>', {
    class: 'like-comment comment-like-color comment_main_id_',
    text: '', 
    href: 'javascript:;',
})
.attr('data-like-comment-id', 'whatever2')
.appendTo(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或使用.data()函数： https://api.jquery.com/data/

此内容不会在DOM中显示

$('<a>', {
    class: 'like-comment comment-like-color comment_main_id_',
    text: '', 
    href: 'javascript:;',
})
.data('like-comment-id', 'whatever3')
.appendTo(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

对于“数据-”属性，请使用此

 $(selector).data(key, value)

将数据属性附加到<a> element in Jquery

5 个答案: