jquery - jQuery検索とdivのコンテンツとの置換

Question

テキストを見つけてjQueryに置き換えようとしていますが、静的テキストを他の静的テキストに置き換える単純な関数しか見つかりませんでした。文字列を別の div の内容に置き換える方法を理解したかったのです。例えば：

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

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

私がしたいのは、文字列「item one」をdivの内容に置き換えて、item-oneのクラスにすることです。この文字列の 1 つのインスタンスだけでなく、ページ上のすべてのインスタンスが必要です。これについて何か助けていただければ幸いです。ありがとう

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

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

jsFiddleリンク。

チップ：

• 'item-one'がIDクラスの代わりに一意に使用される場合
• また、一意のIDを追加する必要があります<p>

Answer 3

2 つの方法でトレレ

まず、静的テキストを div のテキストに置き換えることができる .replace() 関数を使用します。

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

しかし、より良い方法は、変更したいテキストを「スパン」タグに取り、 text() 関数を使用することです

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

Answer 4

これを完全に動的にしたい場合は、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/