1

Как захватить 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>

5
  • Пройтись циклом по результату селектора?
    – u_mulder
    19 мар 2020 в 9:44
  • @u_mulder буду благодарен, если расскажете, как это сделать. Только изучаю JS, не совсем все еще "устаканилось" в голове.
    – Alex
    19 мар 2020 в 9:49
  • Ничего не понятно.
    – Qwertiy
    19 мар 2020 в 9:52
  • это в цикле надо сделать - обычный for или foreEach 19 мар 2020 в 9:54
  • @Qwertiy извините, забыл сказать, что полученный адрес изображения необходимо добавить для li атрибутом data-src=""
    – Alex
    19 мар 2020 в 10:00

2 ответа 2

5

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>

0
2

$('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>

5
  • Air, подскажите, как теперь добавить полученный src="" в data-src="" к каждому li
    – Alex
    19 мар 2020 в 10:01
  • closest же, причём и в jquery, и в native. В цикле заново искать все и выбирать по индексу - это какая-то жесть.
    – Qwertiy
    19 мар 2020 в 10:08
  • @Qwertiy, ты о чем?
    – Air
    19 мар 2020 в 10:12
  • @Air 1. forEach - это цикл - та на каждом img заново по всему документу ищешь одни и те же li. 2. Само по сее сопоставление по индексу вместо вложенности - так себе. 3. Есть же удобный метод closest.
    – Qwertiy
    19 мар 2020 в 11:23
  • Я тя понял... Благодарю...
    – Air
    19 мар 2020 в 11:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.