メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

【jQuery】同一クラスを別々に処理させる為に個人的に覚えておきたいこと

jQuery11
CSSのクラスが複数ある時に、別々のスタイルを適用したかったりイベントを適用したかったりする場合があると思います。そんなときにはとっても便利な方法がありますよ。

同じクラスがついた要素を別々に取得する


例えば、.bodyって名前のclassが三つあったとして、cssだとこのこれは一種類のセレクタだと認知されますよね。ただ、jQueryを使えば、セレクタは一種類ですが、styleを適用したり、classを追加したりすることで、別物として扱う事ができます。ちょっと、意味不明なので少しでも分かりやすく図にするとこうなります。

jQueryAddClassmap

じゃじゃーん。こんな感じになります!こういうのができると、クラスそれぞれに対して別々のスタイルを適用したりクラス適用したり、幅が広がりそうですよね。
とりあえず最初は、同じクラスの要素を取得してみます。

こんな感じのコードでできるはずです。

各要素をjQueryオブジェクトに変換する


jQueryAddClassmap1

あんまりこの辺よくわかんないんですが、HTML要素だけ取得しててもその要素をjQueryで操作する事ができません。さっきからHTML要素と呼んでるものは、JavaScriptではDOMと呼ばれているものです。DOMを操作する為には、別の方法になります。jQueryでも機能や処理の中でDOMを操作しています。ただ、そのjQueryの機能を使うためにはDOMを一度jQueryオブジェクトに置き換える必要があります。ちなみにjQueryオブジェクトにしたものではDOMは扱えないので、jQueryオブジェクトにした後にDOMを扱いたいのであれば、jQueryオブジェクトの[0]を取得する必要があります。

と、言うわけでそれぞれを、jQueryオブジェクト化したことでclickメソッドを使う事が可能になりました。

同一クラスにidを指定しないでhide、showの切り替えをやる


これがやりたかったんですが、脱線しました。やりたいことはこういうことです。

jQueryAddClassmap2

ちょっと図でも分かりづらいですが、クリックしたら同一クラスであっても別の処理がやりたいということです。結果的に書いたコードは同じhide,showと同じ動作をするんですが、これをやることによって、要素ごとにちまちまIDつけなくてもいいので便利かなと思いました。何故これをしないとIDつけないとダメなのかというと、クラスだけにセレクタを適用した場合、全クラスに対してclickメソッドが効いてしまうからです。なので別々にクラスを取得して、別々にclickメソッドを効かせています。というわけで最後のコードです。

関連記事

コメントをお待ちしております