コトの顛末

アクティブ状態の箇所にカレントとしてFontAwesomeのアイコンをつけたかったのですが、
jQueryでaddClassすると思ったようなレイアウトにならない事案が発生。
hamlで直書きして調整するとあんなに楽なのになぁ...

ということで小技発見したのでメモがてら書きます。

問題の事案

FontAwesomeのclassをjQueryでaddClassすると、classはちゃんとつくのですが、
そのclassが付与されたところのレイアウトを合わせるのが大変だったので楽な方法ないかな〜と思ってました。

下記のように空の＜i＞タグを用意して、

%i.fa

それにclassつけたら擬似的に直書きと同じことができる！って思ったんですが...

ブラウザで表示を確認すると、空タグのせいかレンダリングされたコードの中にいないため、
jQueryのaddClassが不発になるという事案が発生しました。

このような処理で小技を実行しました。

まず、普通に FontAwesomeのアイコン使いたいところに書き込みます。
これでスタイルを調整しておきます。

%i.fa.fa-play

でも、アクティブじゃない時は　classの「fa-play」が必要ないので削除します。
しかし！このままでは空タグ扱いとなり、ブラウザ上で表示されない（つまり
jQueryが効かない）ため、スペースのエンティティタグを入れます。

%i.fa  

「＆nbsp」これを入れることにより、空欄判定にならず、jQueryが効きます。

$(".fa").addClass("fa-play");

こんな感じのjQueryをあてがってあげましょう。

無事にactiv時だけカレントマークつきました！

終わりに

逆の方法として、すでについているクラスを消すは簡単な方法でしたが、
読み込みの際に、ズラ〜っと表示され、
読み込み完了後に、カレント箇所だけアイコンがついている状態になる。
読み込み完了後は良いですが、途中経過が気持ち悪かったので、
どうしてもちゃんと必要な箇所にだけアイコンをつける方式で実装したかったのです。
なので小技発見できてよかった！
これが本当に良い方法かはわかりませんが。