Duplicate/change 多个元素的属性基于每个元素预先存在的唯一属性

Question

如何为一组已经创建（动态创建）的元素创建属性，并在相同的相应元素上进行复制和更改？例如：

<div class="category" data-category-name="Pizza">Pizza</div>
<div class="category" data-category-name="Burgers">Burgers</div>
<div class="category" data-category-name="Drinks">Drinks</div>

这些需要添加另一个属性，比如 "data-open-category"，并且需要获取 "data-category-name" 属性的值，如下所示：

<div class="category" data-category-name="Pizza" data-open-category="Pizza">Pizza</div>
<div class="category" data-category-name="Burgers" data-open-category="Burgers">Burgers</div>
<div class="category" data-category-name="Drinks" data-open-category="Drinks">Drinks</div>

Answer 1

尝试使用 .attr() , .data()

$("[data-category-name]").attr("data-open-category", function(_, val) {     
  // set both `.attr()` , `.data()`
  return ($(this).data().openCategory = $(this).data().categoryName)
});
$("[data-open-category]").each(function() {
  console.log($(this).data(), $(this).attr("data-open-category"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="category" data-category-name="Pizza">Pizza</div>
<div class="category" data-category-name="Burgers">Burgers</div>
<div class="category" data-category-name="Drinks">Drinks</div>

Answer 2

使用.each添加数据attr

  $(".category").each(function() {
    var cat = $(this).data("category-name")

    $(this).attr("data-open-category", cat)

})

Fiddle

Duplicate/change 多个元素的属性基于每个元素预先存在的唯一属性

Duplicate/change attribute of multiple elements based on pre-existing, unique attribute per element

javascript

jquery

attributes

attr