jQuery $.each 方法中的 ES6 模板文字答案

【问题标题】：ES6 template literals inside jQuery $.each methodjQuery $.each 方法中的 ES6 模板文字
【发布时间】：2017-12-11 19:03:42
【问题描述】：

是否可以在 jQuery 的 $.each 方法中使用 ES6 模板文字？

尝试这样做，但没有成功：

let arr = this.arr;

  $.each($("g#texts").children(), function (i, contents) {
    $("#`${contents.id}` tspan")
        .text(arr.find(a => a.name == "`${contents.id}`")
        .displayedName);
  })

这里应该更正什么？

【问题讨论】：

那些不是 ES6 模板文字。这是字符串文字中的模板语法。

标签： javascript jquery ecmascript-6

【解决方案1】：

这当然是可能的。您遇到的问题是因为您已将模板文字放在字符串文字中。第二个模板文字也是多余的。如果您修复语法，您编写的代码将可以正常工作：

$("g#texts").children().each(function (i, contents) {
  $(`#${contents.id} tspan`).text(arr.find(a => a.name == contents.id).displayedName);
});

【讨论】：

jQuery 在这方面给了我一个错误：“未捕获的错误：语法错误，无法识别的表达式：# tspan ...”。 “tspan”嵌套在“文本”元素 (SVG) 中。硬编码时设置新的文本值可以正常工作；但是 ${} 文字不会合作。
错误提示contents指向的元素没有id属性，因此使用了无效的选择器# tspan
这就是重点：我没有设置所有孩子的 id 并且该方法继续为空值。现在我得到了纠正，一切正常，感谢您的帮助！