質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

406閲覧

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

akinco

総合スコア17

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/10/26 03:03

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

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

html

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

jvascript

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

js

1$( function() { 2 $( '.sp-slide a' ).each( function() { 3 var value = $( this ).next().text(); 4 $( this ).attr( 'title', value ); 5 } ); 6} );

投稿2018/10/26 03:20

編集2018/10/26 04:25
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/10/26 04:22

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

2018/10/26 04:24

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

2018/10/29 00:24

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

0

ベストアンサー

.attr( attributeName, function )

以下、未検証。

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

HTML

1<div class="sp-slide"> 2 <a href="./img/01.jpg" title="オーバーレイ時のキャプション"> 3 <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"> 4 </a> 5 <p class="sp-layer sp-black sp-padding">写真1の説明文が入ります</p><!--メイン画像表示中のキャプション--> 6</div> 7 8<div class="sp-slide"> 9 <a href="./img/02.jpg" title="オーバーレイ時のキャプション"> 10 <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"> 11 </a> 12 <p class="sp-layer sp-black sp-padding">写真2の説明文が入ります</p><!--メイン画像表示中のキャプション--> 13</div> 14 15<div class="sp-slide"> 16 <a href="./img/03.jpg" title="オーバーレイ時のキャプション"> 17 <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"> 18 </a> 19 <p class="sp-layer sp-black sp-padding">写真3の説明文が入ります</p><!--メイン画像表示中のキャプション--> 20</div> 21 22<script> 23'use strict'; 24jQuery('.sp-slide>a').attr('title', function () { return this.nextElementSibling.textContent; }); 25</script>

Re: akinco さん

投稿2018/10/26 03:53

編集2018/10/27 02:54
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2018/10/26 03:57

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

2018/10/26 04:01

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

2018/10/26 12:54

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

2018/10/27 02:55

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

2018/10/29 00:20

>think49様 返信が遅くなり申し訳ございません。 また、動作確認までしていただき誠にありがとうございます。 ご提示いただいたコードで希望する動作になりました。 お忙しい所ありがとうございました(*´∇`*)
guest

0

jQuery

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

投稿2018/10/26 04:20

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

js

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

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

js

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

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

投稿2018/10/26 03:08

編集2018/10/26 04:06
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/10/26 03:16

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

2018/10/26 03:27

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

2018/10/26 03:39

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

2018/10/26 03:39

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

2018/10/26 03:56

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

2018/10/26 03:58

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

2018/10/29 00:24

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

2018/10/29 01:50

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問