主页 / 问题 / 1266560
Accepted
Alex
Asked:2022-04-06 04:14:51 +0000 UTC2022-04-06 04:14:51 +0000 UTC

如何分别抓取链接/图像中的文本/src并用分隔符打印它们？

  • 772

如何分别捕获текст/src并ссылке/изображении通过分隔符插入接收到的值，根据模板新建一个div <div>текст~src</div>，删除旧代码。

<div class="wrapper">
  <div class="item">
    <img src="/img/img1.png" class="img">
    <a class="link">Текст 1</a>
  </div>
    <div class="item">
    <img src="/img/img2.png" class="img">
    <a class="link">Текст 2</a>
  </div>
    <div class="item">
    <img src="/img/img3.png" class="img">
    <a class="link">Текст 3</a>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    let aItem = document.querySelectorAll('.item');
aItem.forEach(el => {
  let sHtml = `${el.querySelector('.link').textContent}~${el.querySelector('.img').src}`;
  el.innerHTML = sHtml;
});
    <div class="wrapper">
  <div class="item">
    <img src="/img/img1.png" class="img">
    <a class="link">Текст 1</a>
  </div>
  <div class="item">
    <img src="/img/img2.png" class="img">
    <a class="link">Текст 2</a>
  </div>
  <div class="item">
    <img src="/img/img3.png" class="img">
    <a class="link">Текст 3</a>
  </div>
</div>

    如果您需要确切的属性值，而不是图像的完整路径：

    let aItem = document.querySelectorAll('.item');
aItem.forEach(el => {
  let sHtml = `${el.querySelector('.link').textContent}~${el.querySelector('.img').getAttribute('src')}`;
  el.innerHTML = sHtml;
});
    <div class="wrapper">
  <div class="item">
    <img src="/img/img1.png" class="img">
    <a class="link">Текст 1</a>
  </div>
  <div class="item">
    <img src="/img/img2.png" class="img">
    <a class="link">Текст 2</a>
  </div>
  <div class="item">
    <img src="/img/img3.png" class="img">
    <a class="link">Текст 3</a>
  </div>
</div>

    • 5

相关问题