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

Posted 2023-02-22

【中文标题】jQuery $.each 方法中的 ES6 模板文字

【英文标题】：ES6 template literals inside jQuery $.each method

【发布时间】：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 模板文字。这是字符串文字中的模板语法。

【参考方案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 并且该方法继续为空值。现在我得到了纠正，一切正常，感谢您的帮助！