jquery - 替换html以在具有相同类的div中添加空格

Question

我知道之前已经有人问过这个问题，但我找不到我的具体问题的正确答案。我想在小写和大写之间添加空格，仅在具有特定类的 div 中。

假设我有这个 html:

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

我希望这样:

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

使用此代码:

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

结果:

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