web-wizardry

インターネット・スマホ、そしてテレビにwebの魔法をWizardry

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やクラス名が取得できればなぁ」と思った場合は使用してみてくださいね


Page top