children and Find Method in jQuery

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Children_and_Find_Method.css">
    <title>Children and Find Method</title>
</head>

<body>
    <h1>jQuery Descendant Methods</h1>
    jQuery DOM Traversing Methods : Ancestors Methods, Descendants Methods, Siblings Methods, Filtering Methods
    <div id="main-outer">
        <h2>Main Outer</h2>
        <div id="outer">
            <h2>Outer</h2>
            <div id="inner">
                <h2 id="child-head">Inner</h2>
                <div class="box">A</div>
                <div class="box">B</div>
                <div class="box" id="child-C">C</div>
                <div class="box">D</div>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // $("#inner").children().css("background","#ff0000");
            // $("#outer").children().css("background","#ff0000");
            // $("#inner").children(".box").css("background","#ff0000");

            //Main difference between "children()" and "find()" method is that children() method will find only its own children (Not Grand children and Great grand children)
            //"children()" method will target only its immediate children().
            //and find() method will find its own children, grand children and great grand children also.
            // $("#inner").find(".box").css("background","#ff0000");
            $("#main-outer").find(".box").css("background", "#ff0000");
        });
    </script>
</body>

</html>






Below File is css/Children_and_Find_Method.css File.
#main-outer {
    background: #c6c8f2;
    margin: 10px;
    width: 500px;
    height: 380px;
    border: 1px solid #000000;
    padding: 10px;
}

#outer {
    background: #ffe2ad;
    width: 480px;
    height: 280px;
    border: 1px solid #000000;
    padding: 10px;
}

#inner {
    background: #ffc0cb;
    width: 450px;
    height: 180px;
    border: 1px solid #000000;
    padding: 10px;
}

#child-C {
    background: #87ceeb;
    width: 80px;
    height: 100px;
    border: 1px solid #000000;
    margin: 10px 10px;
    justify-content: center;
    align-items: center;
}

.box {
    background: #87ceeb;
    display: inline-block;
    width: 80px;
    height: 100px;
    margin: 10px;
    border: 1px solid #000000;
    text-align: center;
}





Comments

Post a Comment

Popular posts from this blog

Basic Syntax in jQuery

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "css/style.css" > </ head > < body >     < h1 > jQuery Syntax </ h1 >     < div id = "test1" >         < h2 > Test Box 1 </ h2 >         < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel aliquid molestias cum maiores perferendis             accusantium odit tempora doloribus aperiam, deserunt aliquam, magnam porro nihil quas qui dolorum placeat,             delectus aspernatur. </ p >     </ div >     < div id = "test2" >         < h2 > Test Box 2 </ h2 >  ...
Read more

Event "Target" Property in jQuery

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < link rel = "stylesheet" href = "css/Event_Target_Property.css" >     < title > Event Target Property </ title > </ head > < body >     < h1 > jQuery Event.target Property </ h1 >     < div id = "box" >         < h2 > Test Box </ h2 >         < p > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, expedita rem maiores doloribus veritatis,             magnam, vitae placeat officiis laboriosam itaque velit autem! Impedit eos, adipisci numquam corrupti hic             r...
Read more