javascript - 如何更改嵌套子类并使用 jQuery 返回原始父类？

Question

我有一个字符串中的 html 模板需要更新。说:

var tpl = "<div><a href="#"><img src="..."></a></div>";

如何将类添加到 a标记并返回更新后的字符串？此字符串模板可以完全自定义，因此代码不得依赖于此特定字符串。

如果我这样做: $(tpl).find('a').addClass('myClass')然后原来的tpl变量不会受到影响。

如果我这样做: tpl = $(tpl).find('a').addClass('myClass').html()那么我只会得到a的内容标签。

那么正确的做法是什么？

tpl的内容最后应该是:

<div><a href="#" class="myClass"><img src="..."></a></div>

Answer 1

您可以使用 $.fn.end()返回原始匹配集:

tpl = $(tpl).find('a').addClass('myClass').end().prop('outerHTML');

var tpl = '<div><a href="#"><img src="..."></a></div>';
tpl = $(tpl).find('a').addClass('myClass').end().prop('outerHTML');
console.log(tpl);

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

如果你想返回父 jq 对象，而不是外部 HTML 字符串，删除 prop():

tpl = $(tpl).find('a').addClass('myClass').end();