画像と同じパスをaタグのhrefの中に入れたい。

jQuery又はJavaScriptを使用して、画像と同じパスをaタグのhrefの中に入れたい。

HTML
1<ul class="project-modal-list">
2  <li class="project-modal-item hover-all">
3    <a href="ここにimgと同じパスを入れたい" rel="lightbox[group01]"></a>
4    <div class="img-box">
5      <img src="../img/img01.jpg" alt="">
6    </div>
7  </li>
8  <li class="project-modal-item hover-all">
9    <a href="ここにimgと同じパスを入れたい" rel="lightbox[group01]"></a>
10    <div class="img-box">
11      <img src="../img/img02.jpg" alt="">
12    </div>
13  </li>
14  <li class="project-modal-item hover-all">
15    <a href="ここにimgと同じパスを入れたい" rel="lightbox[group01]"></a>
16    <div class="img-box">
17      <img src="../img/img03.jpg" alt="">
18    </div>
19  </li>
20</ul>

yambejp

2022/03/30 03:48

テキストが空のaにhrefを設定してもアクセスできませんが？

Microbe

2022/03/30 09:38

ありがとうございます。ちょっと変なのですが、aタグを擬似要素にしてliをラップしています。

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelectorAll('.img-box img').forEach(x=>{
4    x.closest('.img-box').previousElementSibling.href=x.src;
5    console.log(x.href);
6  });
7});
8</script>
9<ul class="project-modal-list">
10  <li class="project-modal-item hover-all">
11    <a href="#" rel="lightbox[group01]">▼</a>
12    <div class="img-box">
13      <img src="https://placehold.jp/100x100.png?text=1" alt="">
14    </div>
15  </li>
16  <li class="project-modal-item hover-all">
17    <a href="#" rel="lightbox[group01]">▼</a>
18    <div class="img-box">
19      <img src="https://placehold.jp/100x100.png?text=2" alt="">
20    </div>
21  </li>
22  <li class="project-modal-item hover-all">
23    <a href="#" rel="lightbox[group01]">▼</a>
24    <div class="img-box">
25      <img src="https://placehold.jp/100x100.png?text=3" alt="">
26    </div>
27  </li>
28</ul>