Q&A
抽出対象となるliタグも含んだ形でHTMLを示してください。
実現したいこと
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”（指定したいクラス）の属性の値を出力する事は出来なかった。
回答1件
0
ベストアンサー
目的がよくわかりませんが、
下記コードは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
総合スコア684
あなたの回答
tips
プレビュー
