Getting the jquery selector right
<p>I have the following html :</p>

<pre><code>&lt;div class="mainmenu"&gt;
    &lt;ul class="blue"&gt;
                &lt;li class=""&gt;&lt;a href="tst/" id="a1_up"&gt;&lt;span class="all"&gt;tst1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="tst1/" id="a2_up"&gt;&lt;span class="all"&gt;tst2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="tst3/" id="a3_up"&gt;&lt;span class="all"&gt;tst3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="tst4/" id="a4_up"&gt;&lt;span class="all"&gt;tst3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="tst5/" id="a5_up"&gt;&lt;span class="all"&gt;tst4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="tst6/" id="a6_up"&gt;&lt;span class="all"&gt;tst5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="tst7/" id="a7_up"&gt;&lt;span class="all"&gt;tst6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
</code></pre>

<p>I need to collect all span values this part <code>&lt;span class="all"&gt;tst6&lt;/span&gt;</code> I've tried this on jsbin:</p>

<pre><code>$(document).ready(function() {
  $(".mainmenu ul li &gt; span").each(function() {
    alert($(this).val());
    });
 });
</code></pre>

<p>But nothing happens. It's uploaded here :</p>

<p><a href="http://jsbin.com/emulah" rel="nofollow">http://jsbin.com/emulah</a></p>

<p>Live edit :</p>

<p><a href="http://jsbin.com/emulah/edit#javascript,html,live" rel="nofollow">http://jsbin.com/emulah/edit#javascript,html,live</a></p>
