Question

我的问题看似简单，但我找不到解决方案。我的网页上有一些代码如下：

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

我想使用Prism库来突出语法。但它需要有一个这样的类

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

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

我已经搜索了很多，但prepend不适用于类，类和函数，如addClass，toggleClass等。不存储实际的类来添加前缀。

有什么想法吗？

非常感谢。

Answer 1

您可以检索所有code元素，检查它们具有哪个类，并通过删除然后添加新元素来重命名它。

$("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')找到包含该类的元素，.removeClass('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

你必须在var中存储每个类并用前缀连接它，然后删除旧类并设置新类。

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

Answer 5

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

这里只是一个班级，只是在＆＃34;语言前面加上 - ＆＃34;并再次更新课程列表

＆＃13;

$(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;
  });

});

＆＃13;

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

＆＃13;

希望这有帮助

Answer 6

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

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

Answer 7

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

＆＃13;

$('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);
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用jquery为类名添加前缀

7 个答案: