ES6 template literals inside jQuery $.each method

Question

Is it possible to use ES6 template literals inside jQuery's $.each method?

Tried to do like this, without success:

let arr = this.arr;

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

What should be corrected here?

Answer 1

It's certainly possible. The issue you have is because you've placed the template literal inside a string literal. The second template literal is also redundant. If you fix the syntax the code you have written will work fine:

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