title: How to use click function with $(this) on children elements with the same class?
body: <p>I want to create dropdown with country->region->city selection.
  The first ul opens from click on that span and the others set to show on hover (code at the bottom).</p>
  
  <pre><code>&lt;input type="text" id="srch-area" alt="" class="c-textfield suggestionsInput " name="locationStr" maxlength="" size="" tabindex="3" title="" value="Deutschland" defaultvalue="" highlight="y" strict="y" autocomplete="off"&gt;
  &lt;span class="c-icon-arrow-green-down-left c-icon" id="loc-slctbx"&gt;&lt;/span&gt;
  &lt;ul class="dropdown-location-ul" id="dropdown-country" style="display:none;"&gt;
      &lt;li class="dropdown-location-li"&gt;
          &lt;strong&gt;Deutschland&lt;/strong&gt;
          &lt;ul class="dropdown-location-ul" style="display:none;"&gt;
              &lt;li class="dropdown-location-li"&gt;
                  &lt;strong&gt;Brandenburg&lt;/strong&gt;
                  &lt;ul class="dropdown-location-ul" style="display:none;"&gt;
                      &lt;li class="dropdown-location-li"&gt;
                          &lt;strong&gt;Oranienburg&lt;/strong&gt;
                      &lt;/li&gt;
                      &lt;li class="dropdown-location-li"&gt;
                          &lt;strong&gt;Schwedt&lt;/strong&gt;
                      &lt;/li&gt;
                      ...
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="dropdown-location-li"&gt;
                  &lt;strong&gt;Berlin&lt;/strong&gt;
              &lt;/li&gt;
              ...
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="dropdown-location-li"&gt;
          &lt;strong&gt;France&lt;/strong&gt;
      &lt;/li&gt;
      ...
  &lt;/ul&gt;
  
  $('.dropdown-location-li').hover(function(){
      $(this).children('ul').css('left', $(this).parent('ul').width()+'px');
      $(this).children('ul').show();
  }, function(){
      $(this).children('ul').hide();
  });
  </code></pre>
  
  <p>This works just fine and now i need to make it on click to change value of near input to the name of location inside strong tag. I tried the code below but it appears that $(this) selecting the element and all his parents, but i need to get location from only the one i clicked. Please tell me how to do that correctly? Maybe i have completely wrong approach to do this and need to make all with id's and stuff, but i just wanted to minimise the amout of repeating js.</p>
  
  <pre><code>$('.dropdown-location-li').click(function(){
      $('#srch-area').val($(this).children('strong').text());
      $('#dropdown-country').hide();
  });
  </code></pre>
  
  <p>This is how it shows in console. AS you can see when i click on Oranienburg it selects Brandenburg and Deutschland as well which are the parents of the element i clicked.
  <a href="http://i.stack.imgur.com/nWF10.jpg" rel="nofollow">console screenshot</a></p>