Question

我想使用jquery：

更新html字符串中的内容

var html = '<span class="spent_time">2.5 h</span><span class="planned_time">1.3 h</span>' ;

我正在尝试使用以下内容更新“planned_time”范围：

var $html = $(html) ;

和

$(html).find('.planned_time').html('3 h') ;

显然，它不起作用。我错过了什么？

Answer 1

您的字符串需要父容器才能使用find

如果您打算插入新HTML，请在以下后更新：

var html = '<span class="spent_time">2.5 h</span> <span class="planned_time">1.3 h</span>';
$("#d1").html(html); // insert it to show it

$('.planned_time').html('3 h'); // NOW update the span

span { border: 1px solid black; padding:5px  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1"></div>

您还可以换行和更新

var $html = $('<div/>').html('<span class="spent_time">2.5 h</span> <span class="planned_time">1.3 h</span>');
$html.find(".planned_time").text("3 h"); // NOW you can update

$("#d1").append($html); // show it

span { border: 1px solid black; padding:5px  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1"></div>

使用过滤器查看解决方案的其他答案。

Answer 2

使用.filter()代替.find(); .find()遍历父元素的子节点 - .planned_time不是HTML字符串中的子节点

var html = '<span class="spent_time">2.5 h</span><span class="planned_time">1.3 h</span>';

var content = $(html);

content.filter(".planned_time").html("3 h");

console.log($(content).filter(".planned_time").html());
// do stuff with `content` variable
$("body").append(content);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

Answer 3

这是错误的。

$html = $(html);

首先，您需要从字符串中创建并元素和解析html：

var html = $.parseHTML( str );

然后，将新的html附加到您的文档中，假设您有一个标识为div的{{1}}容器：

#container

您可以阅读有关解析html here

的更多信息

使用jquery操作html作为字符串并更新span内容

3 个答案: