JQueryData/Day5Filter.html at master · ulhas1991/JQueryData · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<title>HTML Table Header</title>

<script src="jquery-3.1.1.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

        //To give color to p1 ONLY
        $('.data1 .p1').css('background-color',' blue');

        //Alternate is to use filter
        $('.data1').filter('.data2').css('background-color','yellow');
        $('.data1').css('background-color','green');
        $('.data2').css('background-color',' grey');
        $('.data3').css('background-color','yellow');
    });

</script>
</head>

<body>

    <div class="data1 data2">
        <p>IN DIV 1</p>
    </div>

    <div class="data1">
        <p class="p1">Hello</p>
        <p class="p2">Hii</p>
    </div>

    <div class="data2">
        <p>In data2</p>
    </div>

    <div class="data3">
        <p>In data3</p>
    </div>

</body>
</html>