问题描述
我试图将类转换为数据属性,因为我陷入了只能将类添加到按钮元素的框架中。
jQuery("[class*='data_']").each(function (index) {
var classNames = this.className.split(/\s+/);
for (var i = 0; i < classNames.length; ++i) {
if (classNames[i].substr(0,5) === "data_") {
ctargets = classNames[i].slice(5);
var target = "data-" + ctargets.split('-')[0];
var target_length = (target.length -4);
var value = ctargets.slice(target_length);
jQuery(this).attr({target:value});
}
}
});
但这实际上将target="value"
添加到了我的元素中,而不是data-variable="value"
解决方法
您可以通过更少的字符串操作(和更少的jQuery)来实现这一目标
const t1 = performance.now()
// A regex test for data_attr-
const rx = /^data_\w+-/
document.querySelectorAll("[class*='data_']").forEach(el => {
Array.from(el.classList).filter(c => rx.test(c)).forEach(c => {
const [ dataAttr,value ] = c.split(/-(.+)/)
el.setAttribute(dataAttr.replace("_","-"),value)
})
})
const t2 = performance.now()
document.getElementById("out").textContent = document.getElementById("in").innerHTML
console.log(`Operation took ${t2 - t1}ms`)
pre { white-space: pre-line; }
<div id="in">
<a class="mirror data_target-home-machines" href="#">Home Machines</a>
</div>
<pre id="out"></pre>
特别感谢this answer出色的String.prototype.split()
技巧