jqueryを利用し、動的にテキストを表示したい

Question

お世話になります。WEB制作初心者です。よろしくお願いいたします。

ライトボックスを利用して写真の拡大表示を行いたいのですが、
拡大表示した際に、写真下部にテキストを表示するために、
カスタムデータの、data-title=　にテキストを入力する必要があります。

data-title=　の文章と　<p class="text">~</p> の紹介文の内容が同じになるので、
jQuery　を利用して　data-title=　に自動的に表示されるようにできないでしょうか？
ライトボックスは複数設置します。

---

<dl class="spotbox list_item" data-target="nagoyacastle" > <dt><a href="img/aichi_nagoyacastle.jpg" data-lightbox="fuga" data-title="ここに自動入力"> <img src="img/aichi_nagoyacastle.jpg" alt="名古屋城"></a> </dt> <dd> <p class="text">金の鯱鉾をいただく五層の大天守閣が特徴の名古屋のシンボル。</p> </dd> </dl>

よろしくお願いいたします。

Comments

[yambejp]

data-titleのついたアンカータグと、textクラスのついたpは、１ページ内にそれぞれ１つずつしかないのですか？

[__roku__]

ありがとうございます。
data-title と text　は複数でてきます。
<dl>~</dl>を繰り返し使用して複数個設置する予定です。
その際に変更するのは、data-target="固有の名称"と画像名、textの内容です。

[yambejp]

その場合アンカータグとpタグを紐付ける何かが必要です
idなら確実ですが、クラスやカスタムデータのインデックスをつかったり
HTML構造の相対位置を使ったりすればできるでしょう

[__roku__]

ご回答ありがとうございます。
もう少し学習したいと思います。

Answer 1

前後関係がわからないのでとりあえずidを振って処理してください

Comments

[yambejp]

<script>
$(function(){
$('#a1').attr('data-title',$('#p1').text());
});
</script>
<a href="#" id="a1">省略</a>
<p class="text" id="p1">ほげほげ</p>

[__roku__]

ありがとうございます。
参考に作業をしてみたいと思います。