使用 jquery.each() 替换文本块中的多个文本字符串

Question

我目前正在尝试创建嵌套循环，以将可点击的定义应用于几个文本块中的单词。第一个，外部循环遍历每个 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 有点陌生，如果这是一个非常简单的问题，请原谅我。从阅读开始，似乎我可能需要闭包？任何帮助将不胜感激:)

Answer 1

您应该使用 html() 方法而不是 text()，因为 text() 方法会忽略您在上一次迭代中添加的跨度。

http://jsfiddle.net/erztfr5s/

使用 jquery.each() 替换文本块中的多个文本字符串

Replacing multiple text strings in blocks of text using jquery.each()

each

jquery

closures

replace

nested-loops