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

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

ただいまの
回答率

90.51%

  • jQuery

    8154questions

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

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

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 285

akinco

score 5

いつもこちらでお世話になります。
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);
  });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+4

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/26 13:22

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

    キャンセル

  • 2018/10/26 13:24

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

    キャンセル

  • 2018/10/29 09:24

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

    キャンセル

checkベストアンサー

+2

 .attr( attributeName, function )

以下、未検証。

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

<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 さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/26 12:57

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

    キャンセル

  • 2018/10/26 13:01

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

    キャンセル

  • 2018/10/26 21:54

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

    キャンセル

  • 2018/10/27 11:55

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

    キャンセル

  • 2018/10/29 09:20

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

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

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

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

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

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

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

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


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/26 12:16

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

    キャンセル

  • 2018/10/26 12:27

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

    キャンセル

  • 2018/10/26 12:39

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

    キャンセル

  • 2018/10/26 12:39

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

    キャンセル

  • 2018/10/26 12:56

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

    キャンセル

  • 2018/10/26 12:58

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

    キャンセル

  • 2018/10/29 09:24

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

    キャンセル

  • 2018/10/29 10:50

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

    キャンセル

同じタグがついた質問を見る

  • jQuery

    8154questions

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