Question

我很难理解为什么我的代码的一个版本正在运行，而另一个版本却没有。

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

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

我已经获得了以下代码，这些代码按预期/想象的方式运行：

// 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>');

这是一个实例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

附加问题
根据给出的精彩答案，我还有另外一个问题：
因为它是＆＃39;由于范围问题，不可能像这样使用$(this)选择器，然后如何定位多个元素，例如：

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

请注意，我发现上述内容不正确 - 但$(this)部分只是强调了我应该如何定位这些不同元素的问题。为此目的使用.each()函数是否最佳？

为了回答其他人在这个问题上的问题：附加问题的答案是＆＃34;是＆＃34;基于@mhodges的评论在@woodrow的答案中使用.each()

Answer 1

请参阅下文。你的setTimeout里面的“$（this）”是指setTimeout函数中的范围，它可以是“window”，这是无效的，而“$（this）”在每个语句中为“aa”指循环中的每个“aa”元素。您需要在setTimeout函数中引用“bb”作为类。

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

jQuery - 直接定位元素时由.html（）删除的文本，但在使用.each（）时不会删除

1 个答案: