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>
<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>
