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

Question

我有一些 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了。

感谢您的帮助!

Answer 1

删除所有非字母数字或空格的字符，然后将其小写，然后按空格分割，并按破折号连接。

$('.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>