javascript - 如何将 html 中的数字添加到自定义数据属性

Question

我有一个在整个页面中重复的 HTML 片段。我想从该单个代码片段中获取一个数字，并将其作为自定义数据属性添加到具有单书类的 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>

我尝试获取一个数字值，并通过 jquery 将其添加为自定义数据年份属性

var num = $('.single-book span').text();
$('.single-book').attr('data-year',num)

但问题是这段代码采用了所有值 2018,2015,2017 并将其设置为 data-year="201820152017"。第一个应该是 data-year="2018"，第二个应该是 data-year="2015"等等

我错过了什么，有什么提示吗？谢谢。

Answer 1

您将定位所有跨度元素，然后定位所有单书元素。您需要确保它们属于一起:

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