jQueryの属性セレクタが機能しなくて困っています。

実現したいこと

　jQueryライブラリを用いて、javascriptに属性セレクタで指定のクラスの値をデベロッパーツールのソースコードに出力させたい。
教材は下記を参考にしました。
「2章 jQueryを使う準備をしよう」URL→https://terakoya.sejuku.net/programs/62/chapters/711

前提

ここに質問の内容を詳しく書いてください。
（例）
vscodeで開発、githubで公開しています。

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

添付しているファイル(htmlとjavascript)により試みましたが、そのWEBサイトのオブジェクトをgithubから開きデベロッパーツールからソースコードを確認したところ、別途添付した画像のような出力になった。
コンソール内には、jQueryの単純なセレクタは機能しているが、属性フィルタによるセレクタが機能していない事が伺える。


### 該当のソースコード

```HTML
<!DOCTYPE html>
<html lang = "ja">
<head>
  <title>ホロライブ５期生「尾丸ポルカ」を愛でよう会</title>
  <meta charset="UTF-8">
  <meta name="description" content="よかったら寄ってってください、、">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- javascriptの記述 -->
  <script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="javascript_basic/index.js"></script>
  <!-- ヘッダー -->
  <header>
    <!-- タイトル -->
    <h1 class = "head-title">座長を愛でようの会</h1>
    <!-- ロゴ（＊HTML内で画像操作） -->
    <a class = "head-logo" href="index.html" id="logo"><img src="images/images/logo.png" alt="トップページに戻る" width="200%" height="auto"></a>
     <!-- PC用ナビゲーション -->
     <nav class = "head-navi" id="google-fonts">
     <br>
     <br>
     <br>
     <br>
        <!-- ホロライブ公式にジャンプ -->
        <a id = "navi-1" href="https://hololive.hololivepro.com/talents/omaru-polka/">ホロライブ公式様の座長
          <img src="https://yt3.googleusercontent.com/ytc/AL5GRJVxGt3eeqz_AHd26Oncs9Of9ZHWk9OyjSV0-lybGw=s900-c-k-c0x00ffffff-no-rj" width="8%" height="auto">
        </a> 
        <!-- ホロライブ非公式wikiにジャンプ -->
        <a id = "navi-2" href="https://seesaawiki.jp/hololivetv/d/%c8%f8%b4%dd%a5%dd%a5%eb%a5%ab">ホロライブ非公式wiki様の座長
          <img src="https://encrypted-tbn2.gstatic.com/faviconV2?url=https://seesaawiki.jp&client=VFE&size=64&type=FAVICON&fallback_opts=TYPE,SIZE,URL&nfrp=2">
        </a>       
        <!-- ほろとらっかーにジャンプ -->
        <a id = "navi-3" href="https://trackholo.live/member/?name=omarupolka">ホロとらっかー様の座長
          <img src="https://pbs.twimg.com/profile_images/1308787231557971970/GGreVNmT_400x400.jpg">
        </a>
     </nav>
  </header>
  <br>
  <main>
    <article>
      <!-- メインビジュアル -->
      <section id="main-visual">
        <div id="main-message">
          <h1>座長を愛でようの会</h1>
          <p>尾丸ポルカが好きだよって方が<br>増えればと思っています。</p>
        </div>
        <img src="img/スクリーンショット (17).png" alt="座長と社長">
        <div id="main-pull">
        <figcaption>出典：<cite><a href="https://www.youtube.com/watch?v=jhHRnbebe5M&t=2825s">第二弾¡YAGOOに聞くホロライブとメタバースのこれから【獅白ぼたん/ホロライブ】</a></cite></figcaption>
        </div>
      </section>
      <p>
      <p>
      <div id="main-word">
      <br>
      </div>
    </article>
  </main>
</body>
</html>

javascript
1// 属性フィルタによる抽出
2$(function() {
3  const text = $('li[class*="head"]').text();
4  console.log(text);
5});
6
7// head-titleのみを抽出
8$(function() {
9  const headTitle = $(".head-title").text; 
10  console.log("title");
11});
12
13

試したこと

属性セレクタではなくjQueryの通常の方法で指定したクラスの出力を試したところ、画像のソースコード内の[title]が正常に出力された。また属性セレクタを部分・上部・下部指定で変更しながら試みたが、”head”（指定したいクラス）の属性の値を出力する事は出来なかった。

maisumakun

2023/03/30 03:57

抽出対象となるliタグも含んだ形でHTMLを示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

目的がよくわかりませんが、
下記コードはliタグがセレクタになっていますよ。
HTML内にliタグがないので、当然実行されません。

js
1    $(function () {
2      const text = $('li[class*="head"]').text();
3      console.log(text);
4    });

こちらであれば、動作はします。（期待している結果かどうかは不明ですが）

js
1    $(function () {
2      const text = $('[class*="head"]').text();
3      console.log(text);
4    });

投稿2023/03/30 03:58

NKTIDKSG

総合スコア679

zero-penguin

2023/03/30 07:21

教えていただいたコードで動作しました！目的が不明慮で申し訳ありません。意図を汲み取って回答いただきありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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