我想在HTML元素中的每个段落中添加'data-class'的属性，'data-class'应设置为class的值。我使用了.attr但无法分配相同的值。 页面上目前有 9 个段落，编号为
P2、P3等
我如何将数据类也设置为相同的 p 标签？
到目前为止，我有这样的jQuery：
$('p').attr('data-class', 'p'}
您可以使用.each迭代每个p元素，将data-class属性设置为class属性的值(运行代码段后检查元素以查看更改(：
$(document).ready(function() {
$('p').each(function() {
$(this).attr('data-class', $(this).attr('class'));
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="p1">P1</p>
<p class="p2">P2</p>
<p class="p3">P3</p><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<script>
$(function(){
// $('p').attr('data-class', 'p');
//This will attach a new attribute o you dom element and that you can visible in when in you inspect.
or
$('p').data('class', 'p');
// This may not visible in dom.
console.log($('p').data('class'));
// Dynamic creation
$('<p />').data('class', 'p').appendTo('body');
// Append with loop
const data = ['p1', 'p2', 'p3'];
$('p').each((index,element)=>{
console.log(index,element)});
$(element).data('class', data[index]);
});
});
</script>
</body>
</html>
可以使用.each(fn(index, element){})方法单独迭代和设置值。
$('p').each(function(index, element) {
$(this).attr("data-class", "p" + (index+1));
//or
//$(this).attr("data-class", "p" + $(this).index());
//For Demonstartion
$(this).text("p" + (index+1));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p></p>
<p></p>
<p></p>作为替代.attr(key, func)也可以使用。
$('p').attr("data-class", function(index, element) {
var v = "p" + (index + 1);
//For Demonstartion
$(this).text(v);
return v;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p></p>
<p></p>
<p></p>试试吧
var data_class = "value";
$("p").each(function(index) {
$(this).attr("data-class", data_class);
});
试试这个
var data_class = "value";
$("p").each(function(index) {
$(this).setAttribute("data-class", data_class);
});