ログイン
問題3

childrenとfindを使い分けよう

アイコン画像

問題3:childrenとfindを使い分けよう

findとchildrenの使い分けはできますか?今回の問題がすんなり解ける方は理解できていると思います。

エディターのアイコンあらかじめエディタに書くコード

                <div class="box">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>
¥HTML¥
              
                .parent{
  width: 200px;
  height: 200px;
}
.child{
  width: 100px;
  height: 100px;
}
¥CSS¥
              

ブラウザのアイコン期待する画面

タグアイコン解答ソースコード

              $(function () {
  $(".box").find("div").css("background-color","blue");
  $(".box").children("div").css("background-color","red");
});
¥JavaScript¥
            

コメントのアイコン解説

findは子や孫などのその要素内に存在するすべての要素から適切な要素を指定できます。それに対してchildrenはその要素の一つ下の階層の要素から適切な要素を取得してきます。今回の場合はparentには両方適用されてしまいますが、cssの優先順位は状況にもよりますが、基本的には後から適用された方を優先することになっています。
ログインして解答を見る
jQueryAnimationを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる