Select 具有数据名称的所有标签 - 获取值 - 设置 Class

Question

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

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>

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

感觉应该还算简单，但是好久没接触了JQuery。

感谢您的帮助！

Answer 1

删除所有非字母数字或 space 的字符，然后将其小写，然后在 space 上拆分，并在破折号上连接。

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

Answer 2

普通 JS 版本的代码看起来像这样：

function processElement(element) {
    const clazz =
      element.dataset.sesCat.toLowerCase()
        .replace(/\(\)/g, '') // Remove brackets.
        .replace(/ /g, '-'); // Replace spaces with dashes.
    element.classList.add(clazz);
}

const sesCatElements = document.querySelectorAll('[data-ses-cat]');
sesCatElements.forEach(processElement);

当然，您可以根据需要调整 RegExp。

这里有一些关于 Dataset API 工作原理的信息。

这就是您使用 CSS class names 的方式。

Select 具有数据名称的所有标签 - 获取值 - 设置 Class

Select All Tags with Data Name - Get Value - Set Class

html

javascript

jquery

custom-data-attribute