jquery - jQuery 查找并替换为 div 的内容

Question

我正在寻找并用 jQuery 替换文本，但只找到了用其他静态文本替换静态文本的简单函数。我想弄清楚如何用另一个 div 的内容替换字符串。例如：

<div class="item-one">blue</div>

<p>My color is item one</p>

我想要做的是将字符串“item one”替换为div 的内容，其中包含item-one 类。我想要的不仅仅是这个字符串的一个实例，而是页面上的所有实例。我真的很感激这方面的任何帮助。谢谢

Answer 1

您可以使用text方法：

$('p').text(function(i, current){
   var c = $('.item-one').text();
   return current.replace('item one', c);
})

http://jsfiddle.net/3eE4G/

如果您有更多元素：

$('p').text(function(i, t) {
   var w = t.split(' ')[4];
   var c = $('.item-'+w).text();
   return t.replace('item '+w, c)
})

http://jsfiddle.net/e7DRr/

Answer 2

如果您想拥有这种完全动态的效果，而不关心 div 有多少个类，以及应该使用 div 的内容多少次。

$(document).ready(function()
{
    var replaceClasses = [];
    var currentClasses;
    var i = 0;

    // Save all classes to be used for replacement in an array
    $('div').each(function()
    {
        currentClasses = $(this).attr('class').split(/\s+/);
        for (i; i < currentClasses.length; i++)
        {
            replaceClasses.push(currentClasses[i].replace('-', ' '));
        }
        i = 0;
    });

    // Loop all classes and replace text if applicable
    for (i; i < replaceClasses.length; i++)
    {
        var pText = $('p:contains("' + replaceClasses[i] + '")').text();

        $('p:contains("' + replaceClasses[i] + '")').each(function()
        {
            $(this).text($(this).text().replace(replaceClasses[i], $('.' + replaceClasses[i].replace(' ', '-')).text()));
        });
    }  

});

http://jsfiddle.net/KzCCQ/

Answer 3

$('p').text($('p').text().replace('item one',$('.item-one').text()));

jsFiddle 链接。

提示：

• 如果“item-one”是唯一用途ID而不是类
• 您还应该向<p>

Answer 4

两种方式

首先是使用 .replace() 函数，它可以将一些静态文本替换为 div 中的文本，如下所示：

$("p").text($("p").text().replace("text", $("#some_text").text()));

但更好的方法是将要更改的文本更改为“span”标签并使用 text() 函数

$("p span").text($(".item-one").text());