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

【问题标题】：How to add number from html to custom data attribute如何将数字从 html 添加到自定义数据属性
【发布时间】：2019-01-27 14:17:54
【问题描述】：

我有一个在页面中重复的 HTML sn-p。我想从那个单一的 sn-p 中获取一个数字，并将其作为自定义数据属性添加到具有单本书类的 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" 等等

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

【问题讨论】：

您的 JQuery 代码针对所有具有 .single-book 类的 span 元素。如果您想将每年应用于特定值，请考虑将 id 添加到 span 并相应地添加回来。
试试这个 $(".single-book").attr("data-year",function() { return $(this).find("span").text() }) ;

标签： javascript jquery

【解决方案1】：

您的目标是所有 span 元素，然后是所有单本书元素。您需要确保它们属于同一类：

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

【讨论】：

【解决方案2】：

你可以这样做：

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

这会将attribute data-year 添加到每个.single-book 元素中，其中包含来自span 的值。

工作演示

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案3】：

希望这对你有用。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案4】：

您必须遍历所有元素才能设置属性。在这种情况下，我更喜欢.data() 属性：

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

$('.single-book').each(function(){
  $(this).data('year', $(this).find('span').text());
  console.log($(this).data('year')); // test
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：