jQuery - 直接定位元素时由 .html() 删除的文本，但使用 .each() 时则不删除

Question

我很难理解为什么我的代码的一个版本可以工作，而另一个版本却不能。

背景信息:
我有一些文本字符串，其中包含以下字符，用于将文本的一部分与另一部分分开:|

我的目标是将这个字符后面的文本包装在 <span> 中。它也使用下面的代码，使用 jQuery .each() 。但是，由于我有单个元素(原始元素在每个页面上最多可以出现 40 次)也包含此文本，并且需要相同的过程，因此我想“单独”定位这些元素(而不是循环遍历所有元素)。但是，当我单独定位元素时，元素的整个文本将被删除，而不是被包装/替换。您可以在下面看到不起作用的代码，并在底部有一个示例。

我有以下代码，它按预期/想象工作:

// This part works fine 

$('.aa').each(function() {
$(this).html($(this).text().replace('| ', '<span>')).append('</span>');
});

这部分没有按想象工作:

// Not working as imagined

$(".bb").html($(this).text().replace('| ', '<span>')).append('</span>');

这是一个实例:

// This part works fine 
$('.aa').each(function() {
  $(this).html($(this).text().replace('| ', '<span>')).append('</span>');
});


// This part does not work as imagined?
setTimeout(function(){
// ---------------
$(".bb").html($(this).text().replace('| ', '<span>')).append('</span>');
// ---------------
},3000)

span{
  color:red;
  display:block;
}
.aa{
  margin-bottom: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aa">
Hi | There</div>

<div class="bb">
a | b
</div>

问题:
为什么最后的代码没有像我想象的那样工作，而是完全删除了所有文本，而不是替换文本？
另一方面，有没有比我正在使用的更好的方法来包装剩余的文本？

附加问题
根据给出的精彩答案，我还有另一个问题:
因为不可能使用$(this)由于范围问题，选择器像这样，那么如何定位多个元素，例如:

$(".bb, .cc").html($(this).text().replace('| ', '<span>')).append('</span>');

请注意，我知道上面的内容是不正确的 - 但 $(this)部分只是强调我的问题，即您应该如何针对这些不同的元素。使用 .each() 是最佳选择吗？用于此目的的功能？

为了回答其他人关于此事的问题:附加问题的答案是"is"，可以使用 .each()基于 @mhodges 在 @woodrow 的回答中的评论

Answer 1

请参阅下文。 setTimeout 中的“$(this)”指的是 setTimeout 函数内的范围，它可能是“window”，这是无效的，而“aa”的每个语句中的“$(this)”引用循环中的每个“aa”元素。您需要引用“bb”作为 setTimeout 函数内的类..

// This part works fine 
$('.aa').each(function() {
  $(this).html($(this).text().replace('| ', '<span>')).append('</span>');
});


// This part does not work as imagined?
setTimeout(function() {
  // ---------------
  $(".bb").html($(".bb").text().replace('| ', '<span>')).append('</span>');
  // ---------------
}, 3000)

span {
  color: red;
  display: block;
}

.aa {
  margin-bottom: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aa">
  Hi | There</div>

<div class="bb">
  a | b
</div>