使用 jquery.each() 替换文本块中的多个文本字符串
Replacing multiple text strings in blocks of text using jquery.each()
我目前正在尝试创建嵌套循环,以将可点击的定义应用于几个文本块中的单词。第一个,外部循环遍历每个 class 'n-concept' 中的定义名称和 ID,并创建一个新的 <span>
供内部循环使用。然后,内部循环遍历 'original-text' 的每个块,并将 'nounName' 的每个实例替换为在第一个循环中创建的 <span>
模板。这是代码...
$(document).ready(function(){
$('.n-concept').each(function(){
var nounName = $(this).find('h3').html();
var nounID = $(this).attr('id');
var newString = '<span data-vocabID="'+nounID+'" class="noun-name">'+nounName+'</span>';
$('.original-text').each(function(){
var newText = $(this).text().replace(RegExp(nounName, 'gi'), newString);
$(this).html(newText);
});
});
});
目前,循环正在运行,但仅应用 'n-concept' 循环的最后一次迭代的值,即,它不保留原始文本的更改值。我对 javascript 和 jquery 有点陌生,如果这是一个非常简单的问题,请原谅我。从阅读开始,似乎我可能需要闭包?任何帮助将不胜感激:)
您应该使用 html()
方法而不是 text()
,因为 text() 方法会忽略您在上一次迭代中添加的跨度。
我目前正在尝试创建嵌套循环,以将可点击的定义应用于几个文本块中的单词。第一个,外部循环遍历每个 class 'n-concept' 中的定义名称和 ID,并创建一个新的 <span>
供内部循环使用。然后,内部循环遍历 'original-text' 的每个块,并将 'nounName' 的每个实例替换为在第一个循环中创建的 <span>
模板。这是代码...
$(document).ready(function(){
$('.n-concept').each(function(){
var nounName = $(this).find('h3').html();
var nounID = $(this).attr('id');
var newString = '<span data-vocabID="'+nounID+'" class="noun-name">'+nounName+'</span>';
$('.original-text').each(function(){
var newText = $(this).text().replace(RegExp(nounName, 'gi'), newString);
$(this).html(newText);
});
});
});
目前,循环正在运行,但仅应用 'n-concept' 循环的最后一次迭代的值,即,它不保留原始文本的更改值。我对 javascript 和 jquery 有点陌生,如果这是一个非常简单的问题,请原谅我。从阅读开始,似乎我可能需要闭包?任何帮助将不胜感激:)
您应该使用 html()
方法而不是 text()
,因为 text() 方法会忽略您在上一次迭代中添加的跨度。