jQuery キャプション表示が「undefined」になってしまう

Question

前提・実現したいこと

「jQuery標準デザイン講座」のキャプション表示を作成したいのですが、「undefined」になってしまいます。
打ち間違いは見当たらないようなのでなぜなのか気になります。

どうかご教授よろしくお願いいたします。

発生している問題・エラーメッセージ

console.logで特にこれらの領域に関するエラーは発生しておりません

該当のソースコード

<section class="section-title" id="style">
  <div class="content-wrapper">
<h2 class="section-title">Style</h2>
<div class="style-wrapper">
<ul>

  <li class="style-item"><img src="images/style02-min.jpg" alt="大人キュートなベリーショート" class="style-img"></li>
  <li class="style-item"><img src="images/style03-min.jpg" alt="かわいくて大人気！甘えんぼなガーリースタイル" class="style-img"></li>
  <li class="style-item"><img src="images/style04-min.jpg" alt="愛されゆるふわガール" class="style-img"></li>
  <li class="style-item"><img src="images/style05-min.jpg" alt="ボリューミーで女性らしいシルエット" class="style-img"></li>
  <li class="style-item"><img src="images/style06-min.jpg" alt="ナチュラル清楚な美人に" class="style-img"></li>
  <li class="style-item"><img src="images/style07-min.jpg" alt="さっぱりエネルギー溢れる活力のある女性" class="style-img"></li>
  <li class="style-item"><img src="images/style08-min.jpg" alt="エネルギッシュさにオトナらしさもプラス" class="style-img"></li>
  <li class="style-item"><img src="images/style09-min.jpg" alt="カントリーチックな最先端スタイル" class="style-img"></li>
  <li class="style-item"><img src="images/style10-min.jpg" alt="定番のさらさらストレート" class="style-img"></li>
  <li class="style-item"><img src="images/style11-min.jpg" alt="小動物感漂うふわふわ感癒されること間違いなし" class="style-img"></li>
  <li class="style-item"><img src="images/style01-min.jpg" alt="お父さんのスタイリングもお任せください" class="style-img"></li>
</ul>
</div>
<a href="#"><img src="images/linesend_black-min.png" alt="" class="line_btn"></a>
  </div>
</section>

該当のソースコード

/*style*/
#style{
main li{
    position:relative;

    width:300px;
    height:300px;
    color:$cWhite;
}

/*キャプション部分*/
/*今はないが後からjQueryにより生成される*/
/*今はないがhoverした時に画像の大きさいっぱいに重なる要素になるキャプションを表示するための領域となる*/
main div{
    position:absolute;
    display: none;
    width:100%;
    height:100%;
    padding:20px;
    background:rgba(17,179,179,.7);
    top:0;
left:0;
box-sizing:border-box;}

/*アニメーションように10pxずらしておく*/
/*今はないが後からjQueryにより生成される 上記のdivの中に入れるキャプションの本文になる*/
main p {
    position:relative;
    top:10px;
}
}

該当のソースコード

$(function () {
    //画像のキャプション表示
//li最後の要素にdivを追加
$("li").append("<div>");
//そのなかにdiv
$("div").each(function() {
//画像のキャプションを取得
//自分(div)からみて親要素(li)の子要素(img)のalt属性
//$(this).parent().children("img").attr("alt");
//それを取得したキャプション用にテキストをp要素としてdiv要素内におさめる
$(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>");
});
        //マウスオーバーした時の処理
   /* $("li").hover(function () {
        //マウスオーバー時の処理
//フェードイン
        $(this).children("div").stop().fadeIn(300);
        //キャプションのテキスト位置:10pxから0pxへ移動
        $(this).children("div").children("p").stop().animate({ "top": 0 }, 300);
       
        //マウスアウト時の処理
    }, function () {
        
    });  */
});

試したこと

■見本コードと誤字脱字がないか見比べる
→特に見当たらない様子。

■コメントアウトして原因箇所を探ってみる
→一行ずつコメントアウトしてみたところ、<div>を生成するところ、<img>のalt属性を取得してくるところ（単体のコード）までは特に問題なく画像も表示されているが、以下の箇所からこの問題が発生することからここに問題があるのではないかと推測しています。

$(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>");

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:VScode
ブラウザ:クローム

Answer 1

私は該当の本を見たことはないのに加えてjQueryは標準的に使用していないのですが、その本はあまり良くないような気がします。まず、おそらく動くであろうコードを置いておきます。

imgのalt属性がある時のみ

$(function () {
  $("li").append("<div>");
  $("div").each(function () {
    const alt = $(this).parent().children("img").attr("alt");
    // imgにalt属性がある時のみ
    if (alt) {
      $(this).html("<p>" + alt + "</p>");
    }
  });
});

---

さて、$("div").eachの部分ですが、これは $("li").append("<div>");で追加したdivだけではなく、 <div class="content-wrapper">と <div class="style-wrapper">も取得します。

該当の本の作者はこれで上手く言ったのでしょうが、そうならない場合もあります。
domの操作は基本的に非同期ですので、eachで最初の方に操作したものが最後に反映されることもあります。

例えば <div class="content-wrapper">がthisで指定された場合の$(this).parent().children("img").attr("alt")はundefinedです。
これをコード通り$(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>");でhtmlに指定したらundefinedが表示されます。

liそれぞれはちゃんと反映されていたのに、最後にundefinedで上書きされてしまったのです。

そうならないために、操作する要素はきちんと絞り込む必要があります。

操作する要素を絞り込む

$(function () {
  // li要素でstyle-itemクラスを持つ要素
  $("li" + ".style-item").append("<div>");
  $("li" + ".style-item").each(function () {
    const alt = $(this).children("img").attr("alt");
    console.log(alt);
    $(this)
      .children("div")
      .html("<p>" + alt + "</p>");
  });
});

console.log(alt);を残しておきましたが、元のコードであってもこの様にconsole表示をすればなんとなく原因はわかったはずです。

jQueryは便利ですが、なんとなく使用していると自分が何を操作しているのかわからなくなります。
一つ一つ確認して作成していきましょう。

Comments

[mitrasi]

ご回答ありがとうございます。
遅くなりまして申し訳ございません。
おっしゃる通り試してみましたところ、画像は問題なく表示されました。
（consoleのほうにも無事altの値が出力されているのを確認しました）
キャプション表示の方はいまだに表示されませんが、今回の質問としましては一応「undefinedが出る現象の原因と解決」でしたので、その点は解決したということで一旦こちらは示させて頂きたく思います。

もう少し試してみて直らなければ再度別途質問にてご質問させて頂きます。
ご丁寧な解説まで、ありがとうございました。

[k_a]

キャプション表示されませんか？
私の環境ですと、ご提示いただいたHTMLと回答のJSでキャプションが表示されています。
※alt属性の文字列がp要素として追加されている状態を私はキャプションと認識しています

jqueryの読み込み忘れなどありませんか？

[mitrasi]

ご回答ありがとうございます。
jQueryはhead内で読み込んでおりました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

検証ツールで見た際にHTMLに追加されている、ということでしたら私の方でも確認できております。
ただ、したいこととしましては、hoverすると画像の上に幕（？）のように色のついたdivがかぶさり、そこに取得したキャプションが表示される（こちらに関してはcssはあらかじめ設定していて、jsをきっかけにスタイルが適用される）という感じのものです。
私の説明不足で申し訳ありません。
新規質問の方にcssなどもあげておりますので、よろしければお力添え頂けますと幸いです。