[ jQuery ] セレクタ 選択条件を指定して要素を取得 ( id 属性 / class 属性 )

Tweet

Pocket

jQuery で利用する頻度が高いセレクタの基本的な使用方法を掲載しています。 セレクタとは、HTML 内のタグ ( 要素 ) を条件を設定して選択することをいいます。ここでは id 属性と class 属性をセレクタで取得しています。

id 属性の条件を指定して要素を取得

id 属性を条件指定して要素を取得するサンプルを掲載します。次の HTML を使用しています。

HTML

<div id="id0">ID0</div>
<div id="id1">ID1</div>
<div id="id2">ID2</div>
<div id="id3">ID3</div>
<div id="id4">ID4</div>
<div id="ggg_id">GGG</div>
<div id="bbb_id">BBB</div>

サンプルスクリプト

    // DIVタグでid属性が存在しているものはすべて取得している
    $('div[id]').each(function(){
        console.log( $(this).html() );  // ID0, ID1, ID2, ID3, ID4, GGG, BBB
    });

    // DIVタグでid属性の値が完全一致してるもののみ取得
    $('div[id = id0]').each(function(){
        console.log( $(this).html() );  // ID0
    });

    // DIVタグでid属性の値が一致していないものを取得（否定）
    $('div[id != id1]').each(function(){
        console.log( $(this).html() );  // ID0, ID2, ID3, ID4, GGG, BBB
    });

    // DIVタグでid属性の値で前方一致
    $('div[id ^= id]').each(function(){
        console.log( $(this).html() );  // ID0, ID1, ID2, ID3, ID4
    });

    // DIVタグでid属性の値で後方一致
    $('div[id $= 4]').each(function(){
        console.log( $(this).html() );  // ID4
    });

    // DIVタグでid属性の値で部分一致
    $('div[id *= ggg]').each(function(){
        console.log( $(this).html() );  // GGG
    });

条件に class 属性を指定して要素を選択する

jQuery ではスタイルシートと同じように class 属性の値で要素を選択することができます。こちらは jQuery を使用したことがない人でも、css を使用している方であれば理解が容易だと思います。ここでは、下記のサンプルを使用します。

HTML

   <div class="class0"><p class="class_child">CHILD</p></div>
   <div class="class1">CLASS1</div>
   <div class="ggg_class">GGG_CLASS</div>
   <div class="bbb_class">BBB_CLASS</div>
   <div class="bbb_class ccc_class">BC_CLASS</div>

サンプルスクリプト

    // class属性の値をで完全一致
    $('.class1').each(function(){
        console.log( $(this).html() );  // CLASS1
    });

    /*
     *  class0を持つ要素内の子要素でclass属性の値が class_child の要素
     *  スペースで区切る
     */
    $('.class0 .class_child').each(function(){
        console.log( $(this).html() );  // CHILD
    });
    
    /*
     *  要素を複数指定してOR条件演算する(カンマで区切る)
     */
    $('.class1, .class_child').each(function(){
        console.log( $(this).html() );  // CHILD, CLASS1
    });

    /*
     *  要素を複数指定してAND演算する(連結して記入する)
     */
    $('.bbb_class.ccc_class').each(function(){
        console.log( $(this).html() );  // BC_CLASS
    });

Tweet

Pocket