时间戳

首页 > 解决方案 > 选择具有数据名称的所有标签 - 获取值 - 设置类

javascript - 选择具有数据名称的所有标签 - 获取值 - 设置类

问题描述

我有一些 HTML，我在其中动态打印了一堆元素，其中一些包含特定data属性。因为我的模板语言不能有效地利用正则表达式，所以我需要使用 JavaSript（或 JQuery）来选择数据值，构建一个字符串，然后将该字符串作为一个类添加到该原始元素中。

HTML 示例：

<div class="item" data-ses-cat="This Cool Thing (Yes)"></div>

JavaScript 后所需的 HTML 示例：

<div class="item this-cool-thing-yes" data-ses-cat="This Cool Thing (Yes)"></div>

我只需要向包含的所有data-ses-cat标签添加一个类，然后获取该数据属性的值，运行正则表达式，然后将该新字符串添加为一个类。

我觉得它应该相当简单，但我有一段时间没有接触过很多 JQuery。

谢谢你的帮助！

标签： javascriptjqueryhtmlcustom-data-attribute

解决方案

删除每个不是字母数字或空格的字符，然后将其小写，然后在空格处拆分，并在破折号处加入。

$('.item[data-ses-cat]').each(function(){
  var newClass = $(this).data('ses-cat')
      .replace( /[^a-zA-Z0-9 ]/g, '' )
      .toLowerCase()
      .split( ' ' )
      .join( '-' );
  
  this.classList.add( newClass );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item" data-ses-cat="This Cool Thing (Yes)">Test</div>

根据您的评论，这是一个使用箭头功能的版本。

$('.item[data-ses-cat]').each((index, element)=>{
  var newClass = $(element).data('ses-cat')
      .replace( /[^a-zA-Z0-9 ]/g, '' )
      .toLowerCase()
      .split( ' ' )
      .join( '-' );
  
  element.classList.add( newClass );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item" data-ses-cat="This Cool Thing (Yes)">Test</div>

推荐阅读