我有一些 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了。
感谢您的帮助!
最佳答案
删除所有非字母数字或空格的字符,然后将其小写,然后按空格分割,并按破折号连接。
$('.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>
关于javascript - 选择具有数据名称的所有标签 - 获取值 - 设置类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55736353/