javascript - 替换 var 中的 html 类

Question

我需要能够操作一个包含 html 的变量，我将在应用于 DOM 之前将其应用于 DOM。

我已经检索了一个 Handlebars 模板并编译并应用了一个 JSON 对象。生成一个包含要应用于 DOM 的标记的 var。

遗憾的是 jQuery 无法操作此输出。有没有办法让 jQuery 将此变量视为 html，以便我可以在添加到 DOM 之前对其进行操作？

下面的例子

var htm = '<section><div></div></section>';
$('div',$(htm)).addClass('smurf');
alert(htm);

Answer 1

尝试:

var htm = '<section><div></div></section>';
var $htm = $(htm);
$htm.find("div").addClass('smurf');
htm = $("<div>").append($htm).html();
alert(htm);

演示: http://jsfiddle.net/Mf5JC/

您的代码的问题是 jQuery 没有像您期望的那样就地修改字符串。您必须通过创建 jQuery 元素、操作它(将类添加到子 div)并获取内容来解决这个问题。

你的代码做了什么:

1. 获取 HTML 字符串并将其放入新的 jQuery 对象中
2. 查找任何 <div>该 HTML 中的后代
3. 将类“smurf”添加到匹配的元素
4. 提醒原文htm HTML 字符串

注意它是如何对新的 jQuery 对象进行操作的。创建 jQuery 对象时，它不会保留对原始字符串的引用，因此不会/无法修改它。如果你将逻辑分开，就像我提供的代码一样，你就可以实现你想要的。