jquery - 正确使用 jquery 选择器

Question

我有以下 html :

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

我需要收集这部分的所有跨度值 <span class="all">tst6</span>我在 jsbin 上尝试过:

$(document).ready(function() {
  $(".mainmenu ul li > span").each(function() {
    alert($(this).val());
    });
 });

但是什么也没发生。已上传至此处:

http://jsbin.com/emulah

实时编辑:

http://jsbin.com/emulah/edit#javascript,html,live

Answer 1

试试这个:工作演示 http://jsfiddle.net/mHfUs/5/

$(document).ready(function() {
    $(".mainmenu > ul > li > span").each(function() {
        alert($(this).text());
    });
});​

附: jsfiddle 表现得很有趣，否则我已经准备好了演示 :)

a 位于 li 和 span 之间，正如您在上面的演示中看到的:<这将起作用>

$(document).ready(function() {
    alert('f');
    $("div.mainmenu ul li a span").each(function() {
        alert($(this).text());
    });
});​