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