jQuery：取得した要素を順番に属性へ挿入したい

いつもこちらでお世話になっています。jQueryを勉強中です。
今回も皆様のアドバイスをお願いいたします。

現在、lightboxを使ってフォトギャラリーを作成しています。
今後のサイト更新を楽にするため、<p>の値を取得して、<a data-title="">と<img alt="">に挿入していきたいです。
尚、lightboxはグループ化しておりプレビュー表示の際に前後の写真へスライドします。

過去にこちらでいただいたアドバイスを元に下記コードを試してみましたが
【写真3】をプレビュー表示した際、前後のスライドも【写真3】になります。
順番通りに取得するにはどのようにしたらいいのでしょうか？
ご教示のほどよろしくお願いいたします。

html
1<div class="thumb_area">
2	<div class="thumbnail"><!-- Start -->
3		<a href="./img/03.jpg" data-lightbox="group" data-title="">
4			<img src="./img/03.jpg" alt="">
5		</a>
6		<p>写真3の説明が入ります。</p>
7	</div><!-- End -->
8	<div class="thumbnail"><!-- Start -->
9		<a href="./img/02.jpg" data-lightbox="group" data-title="">
10			<img src="./img/02.jpg" alt="">
11		</a>
12		<p>写真1の説明が入ります。</p>
13	</div><!-- End -->
14	<div class="thumbnail"><!-- Start -->
15		<a href="./img/01.jpg" data-lightbox="group" data-title="">
16			<img src="./img/01.jpg" alt="">
17		</a>
18		<p>写真1の説明が入ります。</p>
19	</div><!-- End -->
20</div>

jQuery
1//pを取得して、".thumbnail img" のaltに挿入
2$(function() {
3  $('.thumbnail p').each(function(index, element) {
4    const target = $(element);
5    target.parent().find('img').prop('alt', target.html());
6  });
7});
8
9//".thumbnail img" のsrc及びaltを取得して、".thumbnail a" のhrefとdata-titleに挿入
10$(function() {
11  $('.thumbnail img').on('click', function() {
12    var tag = $(this).attr("src");
13    var title = $(this).attr("alt");
14    $('.thumbnail a').attr("href",tag);
15    $('.thumbnail a').attr("data-title",title);
16  });
17});

Lhankor_Mhy

2018/11/06 03:02

『前後のスライドも【写真3】になります』とは、./img/03.jpg が表示される、という理解であっていますか？

x_x

2018/11/06 03:21

clickの処理はいるのでしょうか？　過去の質問でこの不具合についての回答はないと思います

akinco

2018/11/06 05:05

> Lhankor_Mhy 様　仰るとおりです。「./img/03.jpg」が表示されます。

akinco

2018/11/06 05:11

>x_x 様　逆質問で申し訳ありません。click時に動作がスタートしたほうがいいのかと思って処理しているだけです。Clickにこだわりはありませんので、不要であればその処理のアドバイスをお願いします。

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

回答2件

ベストアンサー

<p>の値を取得して、<a data-title="">と<img alt="">に挿入していきたいです。

CODE
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="x-ua-compatible" content="ie=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7    <meta name="description" content=""/>
8    <title>Title</title>
9</head>
10<body>
11<div class="thumb_area">
12    <div class="thumbnail">
13        <a href="#" data-lightbox="group">
14            <img src="http://satyr.io/400x80">
15        </a>
16        <p>写真1の説明が入ります。</p>
17    </div>
18    <div class="thumbnail">
19        <a href="#" data-lightbox="group">
20            <img src="http://satyr.io/400x80">
21        </a>
22        <p>写真2の説明が入ります。</p>
23    </div>
24    <div class="thumbnail">
25        <a href="#" data-lightbox="group">
26            <img src="http://satyr.io/400x80">
27        </a>
28        <p>写真3の説明が入ります。</p>
29    </div>
30</div>
31<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
32
33<script>
34$(function(){
35
36    $('.thumbnail p').each(function(index, element) {
37        $(this).prev().attr('data-title', $(element).text());
38        $(this).prev().children('img').attr('alt', $(element).text());
39    });
40
41});
42</script>
43</body>
44</html>

投稿2018/11/06 04:02

編集2018/11/06 04:03

marshmallowy

総合スコア204

colling

2018/11/06 04:07

こっちのが断然スマートですね！

akinco

2018/11/06 05:22

早々にご回答いただきましてありがとうございます。こんなに少ない行数で処理が可能になるのですね… ソースを解読していきたいと思います。

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

lightboxは元々、同じdivの中にあるものをアルバムとしてスライド表示させる機能を持っていますので、単純に下記のようにするだけなのではないでしょうか？
（clickで書き換える意図が不明でしたので、省いています。質問の意図と違っていればゴメンナサイ）

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>無題ドキュメント</title>
6
7<link rel="stylesheet" href="css/lightbox.css">
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
9<script language='javascript' src='js/lightbox.js' class="time"></script>
10    <script>
11    $(function() {
12      $('.thumb_area p').each(function(index, element) {//pを取得して、要素の数だけループ
13        console.log(index);//
14        const target = $(element);
15        target.parent().find('img').eq(index).attr('alt', target.html());//index番目の img 要素の alt に p の内容を入れる
16        target.parent().find('a').eq(index).attr('data-title', target.html());//index番目の a 要素の data-title に p の内容を入れる
17      });
18    });
19</script>
20</head>
21<body>
22  <div class="thumb_area">
23      <!-- Start -->
24          <a href="./img/03.jpg" data-lightbox="group" data-title="">
25              <img src="./img/03.jpg" alt="">
26          </a>
27          <p>写真3の説明が入ります。</p>
28
29          <a href="./img/02.jpg" data-lightbox="group" data-title="">
30              <img src="./img/02.jpg" alt="">
31          </a>
32          <p>写真2の説明が入ります。</p>
33
34          <a href="./img/01.jpg" data-lightbox="group" data-title="">
35              <img src="./img/01.jpg" alt="">
36          </a>
37          <p>写真1の説明が入ります。</p>
38      <!-- End -->
39  </div>
40</body>
41</html>