我可以对存储在HTML字符串中的信息使用addClass吗?

时间:2013-03-03 13:53:20

标签: javascript jquery

我有一个字符串,例如看起来像这样。

var html = '<div class="templatemo_post_text grid-85">
<div id="wmd-preview"><h2>Skriv något!</h2>
<p>Lorem ipsum</p></div>
<div class="templatemo_post_footer">
<div class="templatemo_post_on">
<span class="orange">Skrivet den</span> 3 Mar 2013</div>
<div class="templatemo_post_comment">
<a href="#">Inlägg nummer </a>
</div></div></div>';

我可以用某种方式使用.addClass()将类添加到id = wmd-preview吗? 实际上我的问题是所有javascripting修改现有的变量。我想做的另一件事是用新的标签替换整个标签。

感谢。

3 个答案:

答案 0 :(得分:3)

您可以将该HTML转换为DOM元素:

var element = $(html);

然后选择你想要的div:

var div = element.find('#wmd-preview');

然后添加课程:

div.addClass('new-class');

修改

要将修改后的DOM元素转换回HTML字符串,可以使用jQuery's html function

html = element.html();

请注意,这给出了元素的内部HTML,因此缺少了封闭的div。您可以通过将其添加到另一个div来解决这个问题。

html = $('<div></div>').append(element).html();

答案 1 :(得分:0)

这是你想做的事情

var html = '<div class="templatemo_post_text grid-85"><div id="wmd-preview"><h2>Skriv något!</h2><p>Lorem ipsum</p></div><div class="templatemo_post_footer"><div class="templatemo_post_on"><span class="orange">Skrivet den</span> 3 Mar 2013</div><div class="templatemo_post_comment"><a href="#">Inlägg nummer </a></div></div></div>';

$(html).find('.orange').addClass('someclass')

答案 2 :(得分:0)

感谢您的评论,但它没有解决我的问题,原因是我输入的不好。 我通过使用innerHTML来获取html,但这对解决方案来说效果不佳。

我将我的代码留给任何需要它的人。代码是获取我的DIV的一种方式,当ajax获得成功时,它将更改并删除id wmd-preview。

mydiv = document.createElement('div')
mydiv.className = 'templatemo_post_area addbottom grid-parent';
mydiv.innerHTML = document.getElementById('preview').innerHTML;
$.ajax({
    type: "POST",
    dataType: 'json',
    url: "/pages/posts_ajax.php",
    data: {
        data : text,
        time : timepost
    },
    success: function(response) {
        $(mydiv).find('#wmd-preview').removeAttr('id');
        $(mydiv).find('#postnr').text('Inlägg nummer '+response.id);
        $(mydiv).insertAfter('div#post_area');
    }
});