皆さんこんにちは。本日はCSSのクラス付けを楽にしてくれるjQueryをご紹介します。
サイト作成であるあるなのが、外部のプラグインやライブラリーを実装したはいいものの、内部の構造が複雑or中身がdivの入れ子の山でCSSを反映出来ないってことありませんか?
「HTMLはわかるけど、jQueryやjsのカスタマイズがさっぱりわからないヒヨッコには、組み込んだプラグインやライブラリーの中身なんていじりたくない！」というのが本音。
とはいえいつかはぶち当たる道。そんなあなたに今回のjQueryは一筋のヒントになるかも・・・？

こんな時役立つ！

動的に生成される親要素にCSSを適用したい時。構造が複雑だが、CSSを反映したい要素の下に変動しない特定のCSS(id,cssどちらでもいい)がある場合。例えば以下。

  <div>
    <div>
      <div>
        <div>
          <div class="勝手に増える要素のここに反映したい！">
            <p id="何でもいいけど変動しないCSS" class="何でもいいけど変動しないCSS">CSSを反映したい要素の子</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  

CSSでは子に対してCSSを反映させる「>」があるのに親を指定できない・・・。正直「<」がほしい。< /p>

親要素を選択するjQuery

まずは序盤から。jQueryでは指定した要素の親を指定できます。

  $('.クラス名').parent('親クラス名もしくは要素');
  

具体的に言えば以下。

  <div class="list">
    <p class="test">ここから見ているとき</p>
  </div>
  

  //「test」の親が「list」なら
  $('.test').parent('list');
  

親要素にクラスをつけるjQuery

親要素を選択するjQueryを応用するとクラスをつけることが出来る。

  $('.クラス名').parent('親クラス名もしくは要素').addClass('.追加するクラス');
  

具体的に言えば以下。

  <div>
    <p class="test">ここから見ているとき</p>
  </div>
  

  //「test」の親が「div」ならクラス「.list」をつける
  $('test').parent('div').addClass('.list');
  

もちろんクラス付与以外の条件も「parent」を活用すれば親に色々出来る。

普通にjQueryを発火させるとクラス付与はページ読み込み時にのみ反映するので、サイトを読み込まず動的に中身が切り替わる場合はそのイベント内に付け加えるとうまくいくかもしれない。
ちゃんと動いているか不安なときはコンソールに文字を出力してデバックしてみよう！

  console.log('ちゃんと動いてるよ');