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的内容（信用卡和借记卡就是一个例子）

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: