ログイン

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

jQueryAnimationの問題

jQueryAnimation

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の優先順位は状況にもよりますが、基本的には後から適用された方を優先することになっています。
完了にする!
LINEの友達追加でお役立ち動画をGET!!