JS find class Ex.1

by Ankit Patidar

HTML

<div id="A1">A1
    <div class="child">A1-1</div>
    <div class="child">A1-2</div>
    <div id="A2">A2
        <div class="child">A2-1</div>
        <div class="child">A2-2</div>
        <div id="A3">A3
            <div class="child">A3-1</div>
            <div class="child">A3-2</div>
        </div>
    </div>
</div>
<br/>
<br/>
<br/>
<input type='button' value='find #A1' id='button1'>
<input type='button' value='find #A2' id='button2'>
<input type='button' value='find #A3' id='button3'>

CSS

div{
		padding:8px;
		border:1px solid;
	}

JavaScript

$(document).ready(function () {

    $("#button1").click(function () {

        $('div').css('background', 'white');

        $('#A1').find('.child').css('background', 'red');

    });

    $("#button2").click(function () {

        $('div').css('background', 'white');

        $('#A2').find('.child').css('background', 'red');

    });

    $("#button3").click(function () {

        $('div').css('background', 'white');

        $('#A3').find('.child').css('background', 'red');

    });

})