在 class 名称前加上 jquery

Question

我的问题看起来很简单，但我没有找到解决方案。我的网页上有一些这样的代码：

<code class="bash">
...
<code class="markdown">

而且我想使用 Prism 库来进行语法高亮显示。但它需要有一个像这样的 class

<code class="language-bash">
...
<code class="language-markdown">

所以我的问题是，如何在 JQuery 中在语言命名前添加 "language-"？

我已经搜索了很多，但前缀不适用于 class 和 class 上的函数，如 addClass、toggleClass 等不存储实际的 class 以添加前缀.

有什么想法吗？

非常感谢。

Answer 1

您可以检索所有 code 元素，检查它们有什么 class，然后通过删除然后添加新元素来重命名它。

$("code").each(function(index, elt) {
  var jqElt = $(elt);
  var eltClass = jqElt.attr('class');
  jqElt.removeClass(eltClass);
  jqElt.addClass('language-'+eltClass);
})

Answer 2

var classes = ['bash', 'markdown'];
for (let i = 0; i < classes.length; i++){
  $(`.${classes[i]}`).removeClass(classes[i]).addClass(`language-${classes[i]}`)
};

$('.class')找到带class的元素，.removeClass('class')去掉开头的class，.addClass('language-class')

Answer 3

你可以尝试下面的方法，当你有 multiple classes 时也能很好地工作，如果假设，

$('code').each(function() {
  var elm = $(this);
  var classes = elm.attr('class');
  classes.split(' ').forEach(function(class){
    elm.removeClass(class);
    elm.addClass('language-' + class);
  }
})

Answer 4

您必须将每个 class 都存储在一个 var 中，并将其与前缀连接，然后删除旧的 class 并设置新的。

$( "code" ).each(function( index , elm ) {
  var oldClass = $(elm).attr('class');
  newClass = 'language' + classVal ;
  $(elm).removeClass(oldClass);
  $(elm).addClass(newClass);
});

Answer 5

使用 ClassList 获取所有 classes 的列表。

这里只有一个class，只需在前面加上"language-"，然后再次更新class列表

$(document).ready(function() {
  var codeElements = $('code');
  var length = codeElements.length;


  codeElements.each(function(item) {
    var classList = codeElements[item].classList;
    var newList = [];
    classList = "language-" + classList;
    codeElements[item].classList = classList;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code class="bash">

<code class="markdown">

希望对您有所帮助

Answer 6

直接替换 class 属性应该可以正常工作

$('.bash, .markdown').attr('class', function(_,klass) {
    return klass.replace(/(bash|markdown)/, "language-");
});

Answer 7

这是另一个具有不同 class 场景的演示：（如果元素有 2 个或更多 class，则为后续 class 加前缀）

$('code').each(function(index, item) {
    if ($(item).attr('class') === undefined) return; // if no class at all do nothing
    
    var classList = $(item).attr('class').trim().replace(/(\s+)/g, ' ').split(' ');
    var className = classList.map(function(val, ndx) {
     return val = `language-` + val;
    }).join(' ');
    $(item).attr('class', className);
})

code {
    display: block;
}

[class^="language-"] {
    color: crimson;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Different scenarios of classes</h4>
<code class="bash">initial Class: "bash"</code>
<code class="markdown">initial Class: "markdown"</code>
<code class="bash random">initial Class: "bash random"</code>
<code>initial Class: No class</code>
<code class="bash what  ">initial Class: "markdown what&nbsp;&nbsp;"</code>
<code class="      extra things">initial Class: "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;extra things"</code>
<code class="random     items">initial Class: "random&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items"</code>

在 class 名称前加上 jquery

prefix a class name with jquery

jquery

class

prefix