【jQuery】特定の要素がカスタムデータ属性を持つか判定し、子孫要素すべてにセットする方法

現在制作しているサイトで、カスタムデータ属性周りで、タイトルのような操作を行う必要があったのでメモしておきます。

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP

やりたいこと

特定の要素が任意のカスタムデータ属性とその値(便宜上、このセットをAとします)を持つかどうか判定し、持っていれば(条件がtrueならば)、その特定要素の配下にある全要素に、カスタムデータ属性と値(A)を付与するという流れです。

例えば、以下のようなコードがあったとします。

テーマヘッダーの例
<div id="hoge" data-type="test">
    <div id="hogehoge">  → これにdata-type="test"を付与したい
        <p id="hogehogehoge">テストです  → これにdata-type="test"を付与したい
        </p> 
    </div> 
</div>

このときに、”#hoge”の配下の各子要素(”#hogehoge”、”#hogehogehoge”)をすべて取得し、「test」という値のカスタムデータ属性”data-type”を付与します。

対象の要素が”#hogehoge”だけとか簡単な場合なら、children()、find()などを使えばいいのですが、配下の要素が複数あったり、複雑な構造になっている場合は、一括で指定しちゃったほうが早い場合もあります。

大まかな流れとしては、以下のような流れです。

① 任意のid(この場合は”hoge”)に、特定のカスタムデータ属性(”data-type”)と値(”test”)があるか判定し、

② “hoge”をidに持つ要素の子要素(配下の要素含む)すべてに、”test”という値のカスタムデータ属性”data-type”を付与する

① 特定のカスタムデータ属性を持つかどうか判定

以下のようなif文で判定します。

カスタムデータ属性を持つかどうかは、jQueryのdataメソッドを使って、特定のクラスにおいてundefinedになるかどうかで判断します。

data()の引数に「data-」以降の文字列を指定し、その文字列を含むカスタムデータ属性があるかどうか、という条件です。

サンプルコード
$(function(){    
    if ($("#hoge").data('type') !== undefined){
        //ここに処理を書きます
    }
});
  • undefinedでない場合はtrue(data)→独自データ属性「data-type」を持つ
  • undefinedとなる場合はfaulse(data)→独自データ属性「data-type」を持たない

となります。よって、もしチェックしている要素が独自データ属性「data-type」を持つならif文内の処理を、そうでないならreturnします。

② 任意の要素の配下の要素すべてに、特定のカスタムデータ属性と値を付与する

次はif文内の処理です。

#hogeの配下の全ての要素に対して、カスタムデータ属性「data-type」と値「test」を付与するには、jQueryのattrメソッドを使って、以下のように記述します。

また、#hogeを持つ要素の配下全てを取得し、操作する場合”*”を付け加えます。

サンプルコード
$(function(){    
    if ($("#hoge").data('type') !== undefined){
        $("#hoge *").attr("data-type","test");
    }
});

これで、結果的に下記のように、カスタムデータ属性が付与されます。

テーマヘッダーの例
<div id="hoge" data-type="test">
    <div id="hogehoge" data-type"test">
        <p id="hogehogehoge" data-type="test">テストです
        </p>
    </div>
</div>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)