【jQuery】:only-childで子要素だけを指定する!

子要素だけを指定するにはjQueryの:only-childを使用します。

jQueryの:only-childとは子要素だけを指定するものであり、親要素が子要素を一つだけ持つ場合の子要素を指定することができます。

そのため、親要素が子要素を複数持つする場合に:only-childで子要素を指定しようとすると、無効になりますので注意してください。

また、:only-childする他にchildren()メソッドを使って子要素を指定することもできます。

今回は、jQueryの:only-childを使って子要素を指定する方法について以下の内容で解説していきます。

⚫︎ 親要素が子要素を1つだけ持つ場合
⚫︎ 親要素が子要素を複数持つする場合

⚫︎ jQueryを使用せずに子要素を指定する場合
⚫︎ children()メソッドで子要素を指定する場合

ハルトさん

今回はjQueryの:only-childについて説明していきます。

さとみさん

はい!
お願いします!

:only-childとは

:only-childとはセレクタの親要素が子要素を一つだけ持つ場合の子要素を指定します。

:only-childの書き方

:only-childの書き方は下記となります。

$の()に要素:only-childを指定することで、子要素を指定することができます。

子要素だけを指定するサンプルコード

:only-childで子要素だけを指定するサンプルコードを紹介します。

親要素が子要素を1つだけ持つ場合

親要素が子要素を1つだけ持つ場合に子要素を指定してみます。

sample.html

index.js

出力結果

:only-childで単数の子要素を指定する場合は子要素を取得することができます。
そのため、ボタンを押すと、tdタグ要素の背景色が変化しています。

親要素が子要素を複数持つする場合

親要素が子要素を複数持つする場合に子要素を指定してみます。

sample.html

index.js

出力結果

:only-childで複数持つ子要素を指定する場合は子要素を取得することができません。
そのため、ボタンを押しても、trタグの中にthタグ要素が2つあることから背景色が変化しません。

さとみさん

:only-childで複数持つ子要素を指定すると、子要素を取得することができないんですね!

ハルトさん

そうですね。
親要素が子要素を複数持つ場合は対象になりませんので注意してください。

jQueryを使用せずに子要素を指定する場合

jQueryを使用せず、純粋なJavaScriptで子要素を指定してみます。

sample.html

index.js

出力結果

tdタグ要素の背景色が変わったことから、jQueryを使用せずJavaScriptで子要素を指定しています。

さとみさん

jQueryを使わず同じことを実行させようとすると、とてもコードが長くなるんですね!
これだとjQueryの方がとても便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

children()メソッドで子要素を指定する場合

子要素を指定する方法は、「要素:only-child」の他にchildren()メソッドを使用する方法もあります。

children()メソッドは子要素を取得するメソッドとなります。

sample.html

index.js

出力結果

children()メソッドによってtrタグ要素の子要素お取得しています。
そのため、ボタンを押すと、trタグ要素の子要素であるthタグの背景色が変わっています。

今回のポイント

:only-childで子要素を指定

⚫︎ 子要素のみを指定するにはjQueryの:only-childを使用する

⚫︎ 子要素を指定するには$()の中に「$要素:only-child」を指定する

⚫︎ 親要素が子要素を1つだけ持つ場合は子要素を指定できるが親要素が子要素を複数持つ場合は子要素を指定できない

⚫︎ :only-childの他にchildren()メソッドで子要素を指定することも可能である

関連記事

jQueryの:parentで親要素を指定する方法についてはこちらをご参考ください。

jQueryの:first-childで最初の子要素を指定する方法についてはこちらをご参考ください。

jQueryのlast-childで最後の子要素を指定する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し