javascript - 替换 var 中的 html 类

Question

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

我检索了一个车把模板并编译并应用了一个 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. 警告原始htmHTML 字符串

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

Answer 2

您正在获取一个字符串，从中构造一个 jQuery 对象（从字符串生成一个 DOM），修改 DOM，然后警告原始字符串。

如果要获取修改后的代码，则需要将其序列化回字符串。

var htm = '<section><div></div></section>';
var jHtm = $(htm);
jHtm.find('div').addClass('smurf');
// Add to a div so that we can get the innerHTML of that div
var div = jQuery('<div>').append(jHtm);
alert(div.html());

Answer 3

您的方法应该有效，但不会影响htm变量；您需要将生成的 jQuery 对象添加到 DOM 中：

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