使用jQuery移除多个.title元素末尾冒号时出现内容覆盖问题

嘿，你遇到的这个问题其实是jQuery的一个常见小坑：当你直接用$('.title').html()的时候，它只会获取第一个匹配到的.title元素的内容——也就是"Apples: "，你把这个内容去掉冒号后，又赋值给了所有的.title元素，自然第二个标题就被替换成第一个的内容啦！

我们需要给每个.title元素单独处理内容，这里有两种简单又靠谱的方式：

方式1：逐个遍历处理 #

用.each()遍历每个元素，对单个元素的内容做替换：

$('.title').each(function() {
  // $(this)就是当前正在处理的那个.title元素
  $(this).html($(this).html().replace(':', ''));
});

方式2：用回调函数更简洁 #

jQuery的.html()（或者.text()，如果只有文本内容的话更推荐）支持传一个回调函数，这个函数会给每个匹配元素单独执行，返回的内容就是该元素的新内容：

// 用text()的写法（更安全，适合纯文本内容）
$('.title').text(function(index, oldText) {
  return oldText.replace(':', '');
});

// 如果标题里有HTML标签，就用html()版本
$('.title').html(function(index, oldHtml) {
  return oldHtml.replace(':', '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title"> Apples: </div>
<div class="title"> Oranges: </div>

<script>
$('.title').text(function(index, oldText) {
  return oldText.replace(':', '');
});
</script>

这样处理后，每个标题都会去掉自己末尾的冒号，同时保留各自的原始内容啦～

内容的提问来源于stack exchange，提问作者user3108268