javascript - How to target each child element when their parent is clicked in JQuery -

i try achieve effect on 1 "li" element every time click on '.parent'. keeps working on li elements @ once. want when trigger click event on .parent first li should highlighted, second time trigger click on ,parent second li highlighted , on html:

<div class="parent">   <ul>      <li>1</li>      <li>2</li>      <li>3</li>   </ul> </div> 

jquery:

$('.parent').on('click', function(){   $('li').addclass('true'); }); 

edit different question:

$('.parent').on('click', function(evt) {    $(evt.target).find('li:not(.true)').first().addclass('true');  });

.true {    background-color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="parent">    <ul>       <li>1</li>       <li>2</li>       <li>3</li>    </ul>  </div>