jQueryでattrを活用していこう
2015年01月10日 · jQuery
jQueryでID名やクラス名など、画像のパスなど皆さんはどうやって取得しておりますか?
やり方は人それぞれのやり方があると思うのですが、
今回は、私のやり方を紹介します。
タイトルに書いてある通りで、「attr」を活用していきます。
attrの使い方
ID名やクラス名を取得する方法について説明します。
例えば、以下の様なHTMLの構成があるとします。
ここで「テキスト1」の内容からID名とクラス名を取得することにしましょう
<body> <div id="content"> <h1>タイトル</h1> <div id="nav"> <ul> <li id="text1" class="nav1">テキスト1</li> <li id="text2" class="nav2">テキスト2</li> </ul> </div> <img src="img/img_1.jpg" width="300"> </div> </body>
jQueryのライブラリーは既に読込んでいる状態です。
<script> $(function(){ var id_name = $("#text1").attr("id"); var class_name = $("#text1").attr("class"); }); </script>
取得結果:
id_nameに「”text1″」が格納
class_nameに「”nav1″」が格納
$(“要素”).attr(“取得したい内容”);で取得することができます。
画像のパスを取得することもattrを使用することで容易にできます。
var img_path = $("img").attr("src");
取得結果:
img_pathに「”img/img_1.jpg”」が格納
画像のパスも簡単に取得することができます。
もし「このIDやクラス名が取得できればなぁ」と思った場合は使用してみてくださいね