Question

我很难做一些看似非常简单的事情。我有一个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没有多大意义为此。

Answer 1

您实际上可以build the HTML in jQuery without appending it into the DOM。

$(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);
});

Answer 2

因为$(p[i].content)不是一个元素而是两个，所以基于您的代码：

var tmp = $(p[i].content);
tmp.eq(1).html('<p>new content');
console.log(tmp.html());

如何更新对象内的字符串中的html元素？

2 个答案: