2019年8月31日スポンサーリンク「jQueryの命令で子要素のカウントがなんか上手くいかない...。「jQueryでeven(偶数)とodd(奇数)を使った命令が狙ったところに反映されない...。「jQueryの細かいコツもきちんと把握して、初心者を脱却したい。」この記事はjQueryのコーディングでそんなポイントでモヤモヤしてる方へ向けて書いています。jQueryをコーディングしていて、jQueryの独自セレクターで子要素をカウントして命令した場合と、CSSの擬似セレクターで子要素をカウントして命令した場合とで、狙ったところに命令が効かずに「アレ?」と思った事はありませんか?それは、jQueryとCSSで子要素のカウント方法の仕様が違うことが原因です。僕自身もCSSを覚えたあとにjQueryを勉強していて「ん???思ってたのと違うぞ?」となりました。同じ様な所でモヤモヤしている方へ向けて、jQuery独自の子要素をカウントして命令するセレクター(even/oddなど)と、CSSの子要素をカウントして命令する擬似セレクター(nth-childなど)の違いについて詳しく解説しています。jQueryのセレクタの注意ポイント。似ているけど微妙に違う、子要素のカウントのしかたの話。jQuery独自セレクターとCSS擬似セレクターの動作の違いを実際に確認してみた。jQueryの独自セレクターを使用して「li」にカラー指定をした場合。まとめスポンサーリンクjQueryのセレクタの注意ポイント。似ているけど微妙に違う、子要素のカウントのしかたの話。テーブル(table/表組)を作成していて「奇数の行だけ背景色を変えたい。」だとか、リスト(ul/li)を作成していて「見やすい様に偶数番目と奇数番目で文字の色を変えたいな。」と考えた事はありませんか?その時に便利なのが子要素をカウントして命令するセレクターを使う方法です。偶数を指定する時はevenを、奇数を指定する時はoddを使います。混同してしまいがちな注意すべきポイントがあります。子要素のカウントのしかたが違うというところです。結論から言えば、スクリプトであるjQuery独自セレクターでは、子要素は0、1、2、3・・・というように0からカウントされます。それに対して、CSSの子要素をカウントして命令を適用する擬似セレクターnth-child等は、1、2、3、4・・・と、1からカウントされます。JavaScriptは原則として0からカウントされる仕様になっています。それによりjQueryの独自セレクタの「even/odd」も0から番号が振られてカウントされます。「なぜ0からカウントされるの、ややこしいよ...。」と思いますが、0からカウントされるというのはプログラミング言語全般そういう仕様になっています。CSSの1からカウントされる方が感覚的に分かりやすいですが、1からカウントされるCSSの方がマイノリティーです。jQuery独自セレクターとCSS擬似セレクターの動作の違いを実際に確認してみた。jQueryの独自セレクターを使用して「li」にカラー指定をした場合。CodePen.(※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。)scriptの命令でeven(偶数)の「li」に青色を、odd(奇数)の「li」に赤色が付く様に命令しています。結果を確認してみると、「ul」の子要素「li」に0番目から番号が振られて色が付いている事が分かります。「ul」をまたいでもカウントされていることが分かります。CodePen.(※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。)jQueryの独自セレクタ「even/odd」と同様に、scriptの命令でCSSの擬似クラス「nth-child」を使用し、even(偶数)の「li」に青色を、odd(奇数)の「li」に赤色が付く様に命令しています。結果を確認してみると、「ul」の子要素「li」に1番目から番号が振られて色が付いている事が分かります。「ul」をまたぐと再度1番目からカウントされているところもjQueryの独自セレクタ「even/odd」と違うポイントです。この様に、一見jQueryの独自セレクターとCSSの擬似クラスで奇数、偶数番目を指定するシンプルな命令ですが、それぞれで反映結果が異なるので注意が必要です。分かってしまえば簡単ですが、このちょっとしたコツを知っておくことで初心者から脱却し、より便利にjQueryを使いこなせる様になります。まとめまとめ【jQueryの独自セレクター(even/oddなど)を使った場合】0(ゼロ)番目から番号がふられ、一番最初の要素が0番目となる。タグをまたいでもカウントが続き、命令が適用される。【CSSの擬似セレクター(nth-childなど)でeven/oddを使った場合】1番目から番号がふられ、一番最初の要素が1番目となる。タグをまたぐとリセットされ、再度該当する一番最初の要素からカウントがはじまり命令が適用される。jQuery独自の子要素をカウントするセレクターと、CSSの子要素をカウントして適用する擬似セレクターを使って命令した場合とで、微妙に違う命令の反映結果のお話しでした。本記事が、jQueryコーディング中のモヤモヤの解消し、より自由自在にjQueryを使いこなせる様になるためのお力になれれば幸いです。jquery(ジェイクエリー)リファレンス。基本的な命令一覧のまとめ。jQuery(ジェイクエリー)の基本的な命令一覧を確認できる、日本語のリファレンスをお探しですか?初心者の方はもちろん、中級者の方も便利に活用できるjQueryの一覧をまとめてみました。基本的な命令を確認したい、忘れてしまったので確認したい。そんな時に是非ご活用ください。やって導入するの?初心者でもできる使い方と準備方法。jQueryってどうやって使うの?Webサイトをスタイリッシュに動かすJavaScriptライブラリ「jQuery」。初期設定の方法をどんな方でも分かる備忘録としてまとめています。jqueryの初期設定の方法を知りたい。忘れたので確認したい。Webサイトに動きを付けたい。そんな方は是非参考にご覧ください。...nth-childとnth-of-typeの違いは何?CSS擬似クラスの書き方と比較。「nth-childとnth-of-typeの違いって何だっけ...。」そんな疑問をスッキリ解決。Webデザインをする上での必須知識スタイルシートCSS。混同しやすいややこしい擬似クラスを、サンプル付きで初心者でも直感的に分かりやすく解説しています。Webデザインの勉強中の方や忘れてしまった時のリファレンスとしてご活用ください。javascriptスポンサーリンクスポンサーリンク【無料】プログラミングなんて自分にできるの?一番簡単に最短でスキルを身に着ける方法。こがねさん「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしないゾ...。」AIソルトくん最初はプログラミングスクールの力を借りるのも1つの選択肢だよ。僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です。した基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます。今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。独学で苦戦しているなら、最初はスクールの力を借りるのも1つの選択肢です。「最短でプログラミングスキルを身に付けたい。「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。「一緒に切磋琢磨できるプログラミング仲間が欲しい。「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。プログラミングのオンラインスクールも探せば色々選択肢があります。その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。1つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。スキルは奪われないし裏切りません。その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。最果てデザイナーの今更はじめるライフスタイルデザインデザイン・プログラミングなどphpプログラミング学習1日目。無料開発ソフトで環境を整える方法。最果てデザイナーの今更はじめるライフスタイルデザインライフハック・ハウツー・お役立ち情報などtwitterでよく見る強調の囲みのやつ。ギザギサ吹き出しAAを簡単につくる方法。最果てデザイナーの今更はじめるライフスタイルデザインデザイン・プログラミングなどMacのターミナルの使い方。最果てデザイナーの今更はじめるライフスタイルデザインjquery(ジェイクエリー)リファレンス。基本的な命令一覧のまとめ。Macのターミナルの使い方。何だかんだそれなりに色々できちゃう多機能なデザイナーです。・ネットショップ運営・マーケティング・イラスト・コピーライティングなど音楽やアート、ITや先端技術が好き。クリエイティブで自由に楽しく。デザイン、プログラミング、お小遣い稼ぎ、副業や日々の体験談などの雑記ブログです。/最新の投稿2020年2月2日なんとかなる。【資格】Webクリエイター能力認定試験を受けてみた話【難易度や概要など】2019年12月7日たった5分でHTMLコーディング速度を爆上げ。emmet記法の使い方。2019年11月10日MacでSassがエラーでインストールでできない問題を解決した話【一瞬で解決するかも】2019年11月9日CSS記述を高速化して時間に激務にゆとりを。【体験談】2週間で国家試験合格。ITパスポートのオススメ勉強方法。3級を独学で1発合格する方法【2019年7月】いらすとやさんの闇深い系おもしろ画像のまとめ一発解決!Macのメールが異常に重い時の対処法Google検索のコツ。便利な全20のテクニックとオプション機能まとめ。【体験談】1ヶ月でカラーコーディネーター2級・3級を合格した話【2019年6月試験】やらなきゃ絶対損。規制の前に急げ!めんどくさがり屋でも10分でできた「ふるさと納税」をする方法アイデアが浮かばない...。そんな時に見直すアイデアの出し方のヒント。【2019年版】これでOK。カエレバヨメレバの使い方。jinデザインWordPressサイトで設定する方法を解説。【便利なブログパーツ】アーカイブ2020年2月2019年12月2019年11月2019年10月2019年9月2019年8月2019年7月2019年6月2019年5月2019年4月2019年3月2019年2月2019年1月2018年12月2018年11月2018年10月2018年9月2018年8月スポンサーリンク繋がりやすてく高速、安定のオススメレンタルサーバー。どこを使うか迷っているならXSERVERが絶対オススメです。ドメイン取得価格がたった1円〜。ドメインを取るならお名前.com。me何だかんだそれなりに色々できちゃう多機能なデザイナーです。・ネットショップ運営・マーケティング・イラスト・コピーライティングなど音楽やアート、ITや先端技術が好き。クリエイティブで自由に楽しく。デザイン、プログラミング、お小遣い稼ぎ、副業や日々の体験談などの雑記ブログです。最果てデザイナーの今更はじめるライフスタイルデザイン。