jQueryで要素名を取得する

手元のjQuery関連本に載っていなかった（見つけることができなかった）のでメモっておきます。

jQueryのオブジェクトの要素名を取得したい場合には「tagName」を使います。

例えば、hogeというクラス名が与えられた最初の要素名を取得したい場合。

var tag = $(".hoge")[0].tagName;

以下のように設定すると間違いになるので注意が必要ですね…。（最初間違えた）
複数指定可能なクラス名だと要素を配列として取得しますので。

//間違い
var tag = $(".hoge").tagName;

ちなみに、hogeクラスを持つ全要素を取得したい場合には・・・

$(".hoge").each(function(){
	var tag = $(this).get(0).tagName;
});

【2015/02/26追記】上記コード記述で、るっちょさんよりミスのご指摘をいただき修正しました。
修正前）$(".hoge").get(0).tagName　→ 修正後）$(this).get(0).tagName　

これ、get()がわからなかったです。whileとか使うなら以下のようにできるんですが・・・

i=0;
while( $(".hoge")[i] ){
	var tag = $(".hoge")[i].tagName;
	i++;
}

jQueryのeach()だと、get()を使うんですねえ。かえってややこしくなってしまった。
しかも、get()に「0」を設定するのが、最初は「？」でしたよ。
each()の役割をよく考えればわかるんですが。

いずれにせよ、本に載ってないってことはそんなに使わないってことなの？
結構、条件設定などで使いそうな気もするけど・・・。

2013/10/23追記

tagNameじゃなくてnodeNameでも取得できるみたい。

やりたいこと

• 親要素がliのa要素を取得したい。
  ※a要素を持つliではない。セレクタで指定するのはa要素。

以下は、リスト内にあるa要素のテキストカラーを変更する場合。

<!-- サンプルHTML -->
<div class="sample-content">
<p>今日はいい天気です。<a href="#">天気予報サイト</a>を見ても、雨の心配はありません。</p>
<ul>
	<li>明日の天気は<a href="#">こちら</a>をチェック！</li>
	<li>クリックしてもどこのサイトにも飛びませんのでご注意。</li>
</ul>
</div>

$(".sample-content a").each(function(){
	if( $(this).parent()[0].nodeName == "LI" ) {
		$(this).css("color","green");
	}
});

2行目の

	if( $(this).parent()[0].nodeName == "LI" ) {

は

	if( $(this).parent("li")[0] ) {

でも同じ結果を得られます。こっちの方がスッキリしてるか。

↓実際にはこんな感じ。ちゃんとリスト内のリンクテキストの色がgreenに変わりました。

今回もparent()の後ろに付ける”[0]“で一瞬戸惑ってしまった。

参考までに、jquery.dump.jsを使って$(".sample-content a").parent()をdumpしてみる。
※jquery.dump.jsについては過去の記事を参照。

dump結果

//$(".sample-content a").parent()をdump

こうすると、なぜparent()の後ろに[0]をつけるのか、よくわかります。