jQuery：取得した要素を属性に入れ替えたい

Question

いつもこちらでお世話になります。
jQueryを勉強中です。

SliderProを使って、フォトギャラリーを制作しています。
メイン画像を表示した時と、オーバーレイした時に共にキャプションが表示されるように設定しているのですが
HTML側それぞれにキャプションを入力する手間を省きたいです。
そこで<p>のキャプションを取得し、<a title="">に挿入したいのですが、返される値が[object Object]となってしまいます。
何か指定があるのでしょうか？
解決方法がありましたら教えてください。

<div class="sp-slide">
　<a href="./img/01.jpg" title="オーバーレイ時のキャプション">
　　<img class="sp-image" src="./img/blank.gif" data-src="./img/01.jpg" data-retina="./img/01.jpg"></a>
　　<p class="sp-layer sp-black sp-padding">写真1の説明文が入ります</p><!--メイン画像表示中のキャプション-->
</div>

//キャプション入替え
$(function() {
  $('.sp-slide img').on('click', function() {
    var value = $(".sp-layer");
    $('.sp-slide a').attr("title",value);
  });
});

Answer 1

$( function() {
  $( '.sp-slide a' ).each( function() {
    var value = $( this ).next().text();
    $( this ).attr( 'title', value );
  } );
} );

Comments

[x_x]

これ、動かしてないですよね？

[kei344]

未検証です。あ、aにpが内包されていませんね。修正しておきます。

[akinco]

ご教示いただきましてありがとうございます。
時間ができしだい、検証してみます。

Answer 2

.attr( attributeName, function )

以下、未検証。

(2018/10/27 11:54追記)
検証済のコードに修正しました。

• jQuery#atttr( attributeName, function ) - JSFiddle
• .attr() | jQuery API Documentation

<div class="sp-slide">
  <a href="./img/01.jpg" title="オーバーレイ時のキャプション">
    <img class="sp-image" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=%E5%86%99%E7%9C%9F1" data-src="./img/01.jpg" data-retina="./img/01.jpg">
  </a>
  <p class="sp-layer sp-black sp-padding">写真1の説明文が入ります</p><!--メイン画像表示中のキャプション-->
</div>

<div class="sp-slide">
  <a href="./img/02.jpg" title="オーバーレイ時のキャプション">
    <img class="sp-image" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=%E5%86%99%E7%9C%9F2" data-src="./img/02.jpg" data-retina="./img/02.jpg">
  </a>
  <p class="sp-layer sp-black sp-padding">写真2の説明文が入ります</p><!--メイン画像表示中のキャプション-->
</div>

<div class="sp-slide">
  <a href="./img/03.jpg" title="オーバーレイ時のキャプション">
    <img class="sp-image" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=%E5%86%99%E7%9C%9F3" data-src="./img/03.jpg" data-retina="./img/03.jpg">
  </a>
  <p class="sp-layer sp-black sp-padding">写真3の説明文が入ります</p><!--メイン画像表示中のキャプション-->
</div>

<script>
'use strict';
jQuery('.sp-slide>a').attr('title', function () { return this.nextElementSibling.textContent; });
</script>

Re: akinco さん

Comments

[think49]

コールバック関数のthis値が不正だったので、関数式に直しました。
仮引数で渡してくれないjQueryは困りものですね。

[kei344]

書き換えるのは'.sp-slide>a>.sp-layer'のtitleではなく'.sp-slide>a'のtitleでは。

[think49]

なるほど、確かに。修正しました。

[think49]

まだおかしかったので、動作確認して修正しました。

[akinco]

>think49様
返信が遅くなり申し訳ございません。
また、動作確認までしていただき誠にありがとうございます。

ご提示いただいたコードで希望する動作になりました。
お忙しい所ありがとうございました(*´∇｀*)

Answer 3

$(function() {
  $('p.sp-layer').each(function(index, element) {
    const target = $(element);
    target.parent().find('a').prop('title', target.text());
  });
});

Answer 4

$(指定エレメント名)　で取得できるのはエレメントそのものなので、取得結果がobjectになります。
console.log()でコンソール出力してみると使える機能がわかりますので、そこから自身が使いたい機能を選択すると良いです。

※下記、そのままでは使えません。考えかたやドキュメントの参照にとどめてください。

今回の場合、「指定タグの中のテキスト」なので下記でしょうか。

var value = $(".sp-layer").text();

• .text()

もしかしたら配列で取得されるかもしれないので、下記の方が良いかも。

var value = $(".sp-layer")[0].text();

※本来は0固定でとるのは良くないですが、ひとまず

Comments

[kei344]

> エレメントそのもの
細かいですが、少し語弊があるように思います。取得できるのは特定エレメントを内包したjQueryオブジェクトなので、「$(指定エレメント名)[0]」では。

[m.ts10806]

ご指摘ありがとうございます。
途中で気づき、回答の後半に追記してます。

[kei344]

「取得できるのはエレメントそのものなので」が間違っているよ、という指摘でした。ちなみに配列でも取得されません。（配列でアクセスできるだけ）

[think49]

> var value = $(".sp-layer")[0].text();
要素ノードそのもの(Element)を取得した場合は、jQuery APIを使えません。
この方法をとるなら、
var value = $(".sp-layer")[0].textContent;
var value = document.querySelector(".sp-layer").textContent;

[m.ts10806]

了解です。
ちょっと調整します

[m.ts10806]

というかkei344さんの回答そのままになってしまいますね。
補足のみにしておきます

[akinco]

解説いただきましてありがとうございます。
なんとなくですが、理屈がわかったような…わからないような…？
完全に理解するまでにはまだ時間がかかりそうですが頑張ります。

[m.ts10806]

不確かな内容で回答してしまい申し訳ないです。
ひとつひとつ着実に理解していってください。
基本はトライアンドエラーです。