Select value of nested element
<p>I have nested elements:</p>

<pre><code>&lt;ul class="level-1"&gt;
  &lt;li class="item-i"&gt;I&lt;/li&gt;
  &lt;li class="item-ii"&gt;II
    &lt;ul class="level-2"&gt;
      &lt;li class="item-a"&gt;A&lt;/li&gt;
      &lt;li class="item-b"&gt;B
        &lt;ul class="level-3"&gt;
          &lt;li class="item-1"&gt;1&lt;/li&gt;
          &lt;li class="item-2"&gt;2&lt;/li&gt;
          &lt;li class="item-3"&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="item-c"&gt;C&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="item-iii"&gt;III&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>How to get value (it's '1') from <code>li class="item-1"&gt;1&lt;/li&gt;</code> when clicked? I have problem with defining right selector... How to end with something like this:</p>

<pre><code>$(all children of level-1).click(function() {
    alert($(this.item-1").val(););
}
</code></pre>
