プレフィックスにjqueryのクラス名

Question

私の質問は単純だと思われますが、解決策が見つかりません。

そして、私はプリズムライブラリを使って構文を強調したいと思います。しかし、このようなクラスを持つ必要があります

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

私の質問は、どのようにJQueryで言語名の前に追加するのですか？

私は多くを検索しましたが、prependはクラスやaddClass、toggleClassなどのクラスの関数では機能しません。プレフィックスを追加する実際のクラスは保存されません。

ありがとうございました。

Answer 1

あなたは、すべてのクラスをvarに格納し、プレフィックスと連結してから、古いクラスと新しいクラスを設定します。

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

Answer 2

すべてのcode要素を取得し、それらの要素のクラスを確認してから、新しい要素を削除して名前を変更することができます。

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

Answer 3

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 4

あなたは考えた場合、あなたが同様に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 5

すべてのクラスのリストを取得するには、ClassListを使用します。

ここでは、これが

Answer 6

Aがまっすぐ前方に置き換えることができます単に "言語" でそれを付加し、

$(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">

希望再びCLASSLISTを更新し、ただ一つのクラスでありますクラス属性は正常に動作するはずです

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

Answer 7

ここ異なるクラスのシナリオを持つ別のデモ：forループ（要素が2つの以上のクラスを持っている場合、後続のクラスをプレフィックス）

$('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) { 
 
    \t 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>