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');

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 2

您可以将模板包装在div周围，并在修改后返回到它。

$(function() {
  var tmpl = '<div><a href="#"><img src="#"></a></div>';
  tmpl = jQuery("<div class=\"outer\">")
  .append(tmpl)
  .find('a')
  .addClass('test')
  .parents('.outer')
  .html();
  alert(tmpl);
});

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

https://jsfiddle.net/5qnLh13b/7/

Answer 3

如果您之前没有＆＃34; a-href标记＆＃34;，那么您可以使用： -

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

Answer 4

你需要：

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

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

4 个答案: