Dynamically Changing the child list item background color on the click of parent list item using JQuery

This article is basically focused on how we can change the child list item background color on the click of parent list item using Jquery.

Source code


<html>
<head>
     <style>
        .changebackgroundchild {
            background-color: yellow;
        }
    </style>
    <script src="Script/jquery-1.8.2.min.js"></script>
</head>
<body>
      <h3> Dynamically Changing the child list item background color on the click of parent list item using JQuery </h3>

    <p> Click on the Parent list item based on which the Child list item background color change.</p>


    <p> Parent List Item</p>
    <ol id='parentid'>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ol>

    <p> Child List Item</p>
    <ol type="A" id="childid">
        <li id="A">Coffee</li>
        <li id="B">Tea</li>
        <li id="C">Milk</li>
        <li id="D">Green Tea</li>
    </ol>

    <script type="text/javascript">
        $('#parentid li').on('click', function (event) {
           var parid = $(this).text();
           $('#childid li').removeClass('changebackgroundchild');
           $('#childid').find('li').change('id', parid)
           $('li#' + parid).addClass('changebackgroundchild');                       
        });
    </script>

</body>
</html>

After running the above code you will get the following output
JquerySample1

JquerySample2

Happy coding 😉 …………..

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s