title: jquery onclick within the parent
body: <p>To simplify things, I have 2 ul list like below:</p>
  
  <pre><code>&lt;ul class='same'&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class='same'&gt;
      &lt;li&gt;q&lt;/li&gt;
      &lt;li&gt;w&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>As Im doing a custom slideshow, I am adding/removing class on li within that ul. However, doing this way of selector will of course selector all ul li</p>
  
  <pre><code>$("ul li")
  </code></pre>
  
  <p>I have 4 arrow with represent left,right,up down</p>
  
  <pre><code>    in another div**
  &lt;div class="arrow"&gt;
      &lt;a&gt;left&lt;/a&gt;
      &lt;a&gt;right&lt;/a&gt;
      &lt;a&gt;up&lt;/a&gt;
      &lt;a&gt;down&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can imagine, slideshows are showed as grid. First ul represents first slider, the second slider represents second slider when clicked down arrow and so on and so fore.</p>
  
  <p><img src="https://i.stack.imgur.com/6kjwd.jpg" alt="Demo of slideshow"></p>
  
  <p>How can I target one ul li at a time without modifying css class?</p>