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]をつけるのか、よくわかります。

備忘録 | , |
  • るっちょ

    質問です
    「hogeクラスを持つ全要素を取得したい場合には」
     .get(0)では,最初の要素ではないでしょうか?(間違っていたらごめんなさい)

    ($(“.rectcl”).get(0).tagName);  …(1)
       は
    ($(this).get(0).tagName); …(2)
    ($(this)[0].tagName); …(3)
    (this.tagName); …(4)
    とも書けるようで,試してみたら

    (1)は最初のタグ名だけ返しました.(2)(3)(4)はそれぞれのタグ名を返しました.

    console.log($(“.rectcl”).get(i).tagName);
    i=i+1;
      とすれば,get()もOKでした.

    「get(index) DOMエレメントの集合からインデックスを指定して、
     ひとつのエレメントを参照する。」のようですが….
    jQuery日本語リファレンス http://semooh.jp/jquery/api/core/get/index/

    • http://blog.doli.jp/ doli

      > るっちょさん

      ご指摘ありがとうございます。
      記述ミスに気付いておりませんでした。

      ご指摘の通り、
      $(“.hoge”).get(0).tagName
      では、いくらeachで回しても最初の要素名しか取得できませんよね…。
      修正しておきました。

      もしくは、以下でもいいですけどthisを使う方がしっくりきますね。
      $(“.hoge”).each(function(i){
         var tag = $(“.hoge”).get(i).tagName;
      });

      助かりました。