Конвертировать 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]
}