3

本当に単純に思えることをするのに苦労しています。私はJavaScriptオブジェクトを持っています:

var main = {
    pages : {
        "123" : {
            "content": "<div><p>The div</p></div><nav><p>The nav</p></nav>",
            "foo":"bar"
        },
        "456" : {
            "content": "<div><p>The div</p></div><nav><p>The nav</p></nav>",
            "foo":"bar"
        }
    }
};

私は次のコードを試しています：

$(function(){
        var p = main.pages;
        $.each(p,function(i,el){
            var c = p[i].content;
            var newc = $(c).find('nav').html('<p>New content</p>');
            //console.log(c);
            //console.log(newc);
        });
        //console.log(p)
});

オブジェクトを次のようにするには:

var main = {
    pages : {
        "123" : {
            "content": "<div><p>The div</p></div><nav><p>New content</p></nav>",
            "foo":"bar"
        },
        "456" : {
            "content": "<div><p>The div</p></div><nav><p>New content</p></nav>",
            "foo":"bar"
        }
    }
};

でも、なかなかできなくて困っています。私は何が欠けていますか？

私はjsfiddleで前の例を設定しました

文字列を dom 要素として操作しようとするのは一般的には良い考えではないことは理解していますが、オブジェクトが RESTful サーバーから取得され、そのために現在のページに html を挿入することはあまり意味がないため、他に選択肢はありません。

4

2 に答える 2

2

DOM に追加せずに、実際に jQuery で HTML を構築できます。

$(function () {
    var p = main.pages;
    //a temporary div
    var div = $('<div>');
    $.each(p, function (i, el) {
        //append to div, find and replace the HTML
        div.append(p[i].content).find('nav').html('<p>New content</p>');
        //turn back into a string and store
        p[i].content = div.html();
        //empty the div for the next operation
        div.empty();
    });
    console.log(p);
});
于 2013-05-11T07:46:28.577 に答える
1

$(p[i].content)1つの要素ではなく2つの要素であるため、コードに基づいて:

var tmp = $(p[i].content);
tmp.eq(1).html('<p>new content');
console.log(tmp.html());
于 2013-05-11T07:52:49.950 に答える