Конвертировать JQuery Each в цикл ES6 / 7

Question

Я пытаюсь удалить зависимость jQuery, и замена этого .each на цикл оказывается сложной задачей.

// inline <img> when src = .svg so it is styled with CSS 

$('[src$=".svg"]').each(function() { // get .svg 
  var $img = $(this);
  var imgURL = $img.attr("src"); // get src url
  $.get(
    imgURL,
    function(data) { // Get the SVG guts from image file
      var $svg = $(data).find("svg");
      $img.replaceWith($svg);  // Replace img with SVG guts
    }, "xml"
  );
});

Answer 1

Браузеры реализуют селекторы в стиле jQuery и методы сбора.Таким образом, каждый цикл jQuery может быть эмулирован в обычном JavaScript с использованием document.querySelectorAll для возврата NodeList, который является массивоподобным объектом, своего рода подобным коллекции jQuery:

const nodeList = document.querySelectorAll('[src$=".svg"]')

Вы можете позаимствовать метод forEach из массивов:

Array.prototype.forEach.call(nodeList, node => {
  // do something
})

Большинство браузеров (кроме IE) фактически поддерживают метод forEach непосредственно на NodeList s:

nodeList.forEach(node => {
  // do something
})

Вы также можете использовать цикл for / while и получать доступ к отдельным элементам, используя синтаксис в квадратных скобках:

for (let i = 0; i < nodeList.length; i++) {
  // current element is nodeList[i]
}