同じクラスのdivに空白を追加するにはhtmlを置き換えてください

Question

これは前に尋ねられたことは分かっていますが、私の特定の質問に正しい答えが見つかりませんでした。私は小文字と大文字の間に空白を追加したいと思います。特定のクラスを持つdivでのみ使用します。

のは、私はこのHTMLを持っているとしましょう：

<div class='type'>CreditCard</div> 
<div class='type'>DebitCard</div> 

私はこれがなりたい：中

$('.type').html($('.type').html().replace(/([a-z])([A-Z])/g, "$1 $2")); 

結果：

このコードを使用して

<div class='type'>Credit Card</div> 
<div class='type'>Debit Card</div> 

<div class='type'>Credit Card</div> 
<div class='type'>Credit Card</div> 

も参照してくださいhttps://jsfiddle.net/ny8h5rv4/

私は間違っていますか？私は（単なる例であるクレジットカードおよびデビットカード）のdivの内容を知っていないと仮定すると

$('.type').html($('.type').html().replace(/([a-z])([A-Z])/g, "$1 $2"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='type'>CreditCard</div> 
 
<div class='type'>DebitCard</div>

Answer 1

forループを追加する必要があります。

$('.type').html()最初の要素のhtmlを取得し、すべて$('.type')に適用します。

$('.type').each(function(elem) { 
 
    $(this).html($(this).html().replace(/([a-z])([A-Z])/g, "$1 $2")); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='type'>CreditCard</div> 
 
<div class='type'>DebitCard</div>

Answer 2

あなたのコードの問題は、HTML（ある）のみ、コレクションの最初の要素に返します。あなたはそれをコレクションのすべての要素に適用するよりも。コレクションをループする必要があります。だからeach（）を使うか、html（）/ text（）の中で関数を使うことができます。メソッドの引数はindexとtext/htmlです。そのインデックスに適用する文字列を返します。

$(".type").text(
 
    function(index, txt) { 
 
    return txt.replace(/([a-z])([A-Z])/g, "$1 $2"); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='type'>CreditCard</div> 
 
<div class='type'>DebitCard</div>