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的所有标签中添加一个类，然后获取该data属性的值，运行regex，然后将该新字符串添加为类即可。

我觉得它应该很简单，但是我已经有一段时间没碰过很多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>

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的方式。

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

2 个答案: