Select Child element and add css using Jquery

 Jquery  has a powerful DOM selection feature. You can select all child elements from a div or any other container and add CSS to those child elements.

Select all images from a div and change CSS using jquery

In the above UI , When a user clicks on an image A border is applied with padding. But when while click on another image border is applied but it needs to clear the previously selected image border. So the code given below help you to achieve this.
Border of all images inside of div id=''imgcon" will be removed by jquery and add a border on the selected image

<div id="imgcon">
    <img src="/Upload/notesimg/1014.jpg" id="img1014" onclick="ChangeCSS('img1014')" >
    <img src="/Upload/notesimg/1014.jpg" id="img1015" onclick="ChangeCSS('img1015')">
    <img src="/Upload/notesimg/1014.jpg" id="img1016" onclick="ChangeCSS('img1016')">
</div>
<script>
    function ChangeCSS(id) {    

        $("#imgcon img").css("border", "none");
        $('#img' + id).css({ "border": "solid 2px red", "padding": "2px" });

    }
</script>

Next Topic