Javascript 如何将数字从html添加到自定义数据属性

我有一个HTML片段，在整个页面中重复。我想从单个代码片段中获取一个数字，并将其作为一个自定义数据属性添加到具有单个book类的div中

<div class="books row">
   <div class="col-md-2 single-book">
 <p class="title">Hippie</p>
 <span>2018</span>
  </div>
<div class="col-md-2 single-book">
   <p class="title">Alchemist</p>
   <span>2015</span>
    </div>
<div class="col-md-2 single-book">
  <p class="title">The Spy</p>
  <span>2017</span>
  </div>
</div>

但问题是，该代码采用了所有值201820152017，并将其作为数据年=“201820152017”。第一个应为数据年=“2018”，第二个应为数据年=“2015”，以此类推

---

我遗漏了什么，有什么提示吗？谢谢。

您的目标是所有跨元素，然后是所有单个书籍元素。您需要确保他们属于一起：

$('.single-book').each(function() {
  $(this).attr('data-year',$(this).find('span').text())
})

---

您的目标是所有跨度元素，然后是所有单个书本元素。您需要确保他们属于一起：

$('.single-book').each(function() {
  $(this).attr('data-year',$(this).find('span').text())
})

---

您可以这样做：

$(".single-book").attr("data-year",function() {
  return $(this).find("span").text()
});

这将向每个

元素添加
属性
数据年
。单个book
元素中包含
span
中的值

工作演示


$（“.single book”）.attr（“数据年”，函数（）{
返回$（this.find（“span”）.text（）
});

嬉皮士

2018
炼金术士

2015
间谍

2017
您可以这样做：

$(".single-book").attr("data-year",function() {
  return $(this).find("span").text()
});

这将向每个
元素添加
属性
数据年
。单个book
元素中包含
span
中的值

工作演示


$（“.single book”）.attr（“数据年”，函数（）{
返回$（this.find（“span”）.text（）
});

嬉皮士

2018
炼金术士

2015
间谍

2017
希望这对您有用


$（'.single book'）。每个（函数（）{
让num=$（this.find（'span'）.text（）；
$（this.attr（'data-year'，num）；
});

嬉皮士

2018
炼金术士

2015
间谍

2017
希望这对您有用


$（'.single book'）。每个（函数（）{
让num=$（this.find（'span'）.text（）；
$（this.attr（'data-year'，num）；
});

嬉皮士

2018
炼金术士

2015
间谍

2017
必须循环所有元素才能设置属性。在这种情况下，我更喜欢属性：

存储与匹配元素关联的任意数据，或在命名数据存储中为匹配元素集中的第一个元素返回值


$（'.single book'）。每个（函数（）{
$（this）.data（'year'，$（this）.find（'span'）.text（））；
console.log（$（this.data（'year'））；//test
});

嬉皮士

2018
炼金术士

2015
间谍

2017
必须循环所有元素才能设置属性。在这种情况下，我更喜欢属性：

存储与匹配元素关联的任意数据，或在命名数据存储中为匹配元素集中的第一个元素返回值


$（'.single book'）。每个（函数（）{
$（this）.data（'year'，$（this）.find（'span'）.text（））；
console.log（$（this.data（'year'））；//test
});

嬉皮士

2018
炼金术士

2015
间谍

2017
JQuery代码的目标是.single book类的所有span元素。如果您希望每年应用一个特定的值，请考虑将ID添加到SPAN并相应地添加它。尝试这个$（“.No.Book”）。AtTo（“数据年”），函数（）{Read $（this）。find（“Stun”）.Trand（）}；JQuery代码的目标是.single book类的所有span元素。如果您希望每年应用一个特定的值，请考虑将ID添加到SPAN并相应地添加它。尝试这个$（“.No.Book”）。AtTo（“数据年”），函数（）{Read $（this）。find（“Stun”）.Trand（）}；