Q:

How to add class on click with jQuery to list item?

I have a list item like 
<ul>
    <li><img id="1" src="" /></li>
    <li><img id="2" src="" /></li>
    <li><img id="3" src="" /></li>
</ul>

<input type="button" >

I would like on click of any of the list to add class and remove from others with jQuery. Basically to make only one item selected at the time.
and on button click to show id of selected list item

A:

This will do what you want AND get you the ID of the img tag within the selected li
$('ul > li').click(function() { 
  $('ul > li').removeClass('active'); 
  $(this).addClass('active'); 
});

$('input:button').click(function() {
  alert($('li.active img')).attr('id')); 
});

