Как захватить src="" у img через JS?

Question

Как захватить src="" у <img class="img-val">через JS и добавить его для <li> как атрибут data-src=""?
Пытался выполнить подобным кодом, но он берет src="" только у первой цепочки li>div>div>img.

jQuery(document).ready(function($) {
  $('.piz').children().children()
  let src = $('.img-val').attr('src')
  $('.piz').attr('data-src', src)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="piz">
    <div class="one">
      <div class="two">
        <img src="https://cdn.sstatic.net/Sites/ru/Img/sprites.svg?v=f508971f422f" class="img-val">
      </div>
    </div>
  </li>
  <li class="piz">
    <div class="one">
      <div class="two">
        <img src="vk.com/vk.png" class="img-val">
      </div>
    </div>
  </li>
</ul>

Answer 1

$('img').each(function(index, element) {
  console.log( index, element.src);
  $('li').attr('data-src', element.src);
  console.log($('li'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="piz">
    <div class="one">
      <div class="two">
        <img src="https://cdn.sstatic.net/Sites/ru/Img/sprites.svg?v=f508971f422f" class="img-val">
      </div>
    </div>
  </li>
  <li class="piz">
    <div class="one">
      <div class="two">
        <img src="vk.com/vk.png" class="img-val">
      </div>
    </div>
  </li>
</ul>

document.querySelectorAll('img').forEach((element, index) => {
  console.log(element.src);
  document.querySelectorAll('li')[index].setAttribute('data-src', element.src);
  console.log(document.querySelectorAll('li'));
});

<ul>
  <li class="piz">
    <div class="one">
      <div class="two">
        <img src="https://cdn.sstatic.net/Sites/ru/Img/sprites.svg?v=f508971f422f" class="img-val">
      </div>
    </div>
  </li>
  <li class="piz">
    <div class="one">
      <div class="two">
        <img src="vk.com/vk.png" class="img-val">
      </div>
    </div>
  </li>
</ul>

Answer 2

jQuery(document).ready(function ($) {
  $('.piz').attr('data-src', function () {
    return $(this).find('.img-val').attr('src')
  })
  
  console.log($('ul')[0].outerHTML)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="piz">
    <div class="one">
      <div class="two">
        <img src="https://cdn.sstatic.net/Sites/ru/Img/sprites.svg?v=f508971f422f" class="img-val">
      </div>
    </div>
  </li>
  <li class="piz">
    <div class="one">
      <div class="two">
        <img src="vk.com/vk.png" class="img-val">
      </div>
    </div>
  </li>
</ul>

БЛОГ НА HUSL

Как захватить src="" у img через JS?

Ответы (2 шт):