Как обернуть все картинки в блоке в ссылку на саму же себя?

Question

[pofeg]

Есть блок, в нём лежат несколько изображений:

<div id="gaga">
  <div class="item"><img src="ololo/png.jpg"></div>
  <div class="item"><img src="ololo/png2.jpg"></div>
  <div class="item"><img src="ololo/png3.jpg"></div>
</div>

Надо обернуть все изображения в ссылку <a href="ссылка на это же изображение">:

<div id="gaga">
  <div class="item"><a href="ololo/png.jpg"><img src="ololo/png.jpg"></a></div>
  <div class="item"><a href="ololo/png2.jpg"><img src="ololo/png2.jpg"></a></div>
  <div class="item"><a href="ololo/png3.jpg"><img src="ololo/png3.jpg"></a></div>
</div>

Вот моя попытка, но она тщетна:

$('#gaga').find('img').wrap('<a href="' + this.src + '"></a>')

Answer 1

[0xD34F]

$('.item img').wrap(function() {
  return '<a href="' + $(this).attr('src') + '"></a>';
});

или

document.querySelectorAll('.item img').forEach(n => {
  n.outerHTML = `<a href="${n.attributes.src.value}">${n.outerHTML}</a>`;
});

или

for (const n of document.querySelectorAll('.item img')) {
  const a = document.createElement('a');
  a.href = n.getAttribute('src');
  n.after(a);
  a.append(n);
}