HTML中p标记的jQuery .attribute
HTML中p标记的jQuery .attribute
提问于 2020-02-17 03:43:01
我想在HTML元素中的每个段落中添加一个'data-class‘属性，'data-class'应该设置为class的值。我使用过.attr，但无法分配相同的值。当前页面上有9个段落，其编号为
p1，p2，p3等。
我如何将数据类设置为相同的p标记呢？
到目前为止，我有这样的jQuery：
$('p').attr('data-class', 'p'}回答 5
Stack Overflow用户
回答已采纳
发布于 2020-02-17 04:05:06
您可以使用p迭代每个.each元素，将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>
Stack Overflow用户
发布于 2020-02-17 03:55:12
<!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>Stack Overflow用户
发布于 2020-02-17 04:01:45
您可以使用.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60255654
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号