jquery按类获取嵌套项的值

Question

我想弄清楚如何在我的 html 中获取嵌套项的值。 我的html具有以下结构

<DIV class=s4-ql id=zz17_V4QuickLaunchMenu>
  <DIV class="menu vertical menu-vertical">
    <UL class="root static">
      <LI class=static><A title="Executive Team description updated" class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Executive Team</SPAN>    </SPAN></A></LI>
      <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background>      <SPAN class=menu-item-text>Finance</SPAN></SPAN></A></LI>
      <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background>    <SPAN class=menu-item-text>Human Resources</SPAN></SPAN></A></LI>
      <LI class="static selected">
         <A class="static selected menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Information Technology</SPAN><SPAN class=ms-hidden>Currently selected</SPAN></SPAN></A> 
      <UL class=static>
          <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Calendar</SPAN></SPAN></A></LI>
          <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Contacts</SPAN></SPAN></A></LI>
          <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background>  <SPAN class=menu-item-text>Discussions</SPAN></SPAN></A></LI>
          <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Shared Documents</SPAN></SPAN></A></LI>
          <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Workspaces</SPAN></SPAN></A></LI>
      </UL></LI>
      <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Legal</SPAN></SPAN></A></LI>
      <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Manufacturing</SPAN></SPAN></A></LI>
      <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Sales</SPAN></SPAN></A></LI>
      <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Purchasing</SPAN></SPAN></A></LI>
      <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Safety</SPAN></SPAN></A></LI>
      <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-background><SPAN class=menu-item-text>Sales/Materials</SPAN></SPAN></A></LI>
     <LI class=static><A class="static menu-item" href="#"><SPAN class=additional-    background><SPAN class=menu-item-text>Traffic</SPAN></SPAN></A></LI>
    </UL>
</DIV>
</DIV>

任何时候我使用下面的 jquery

var siteTitle = $(".s4-ql").find(".menu-item-text").text();

我能够获得 UL 中的第一项，但我似乎无法过滤我的结果，以便我可以定位 s4-sql 类，然后选择静态项，然后是菜单项文本我需要得到。我已经尝试过使用多个类来定位特定项目的各种变体，但没有运气。

var siteTitle = $(".s4-ql.static selected menu-item").find(".menu-item-text").text();
var siteTitle = $(".s4-ql .static selected menu-item").find(".menu-item-text").text();
var siteTitle = $(".static selected menu-item").find(".menu-item-text").text();
var siteTitle = $(".s4-ql .static selected menu-item .menu-item-text").text();

以上方法都不起作用，这看起来很简单，但我不明白！

Answer 1

第一个 ul 元素不能有 span 标记作为子元素

$(".s4-ql.static selected menu-item")// you forget "." for class in nesting class

改变

$(".s4-ql.static .selected .menu-item")

Answer 2

试试这个：

var siteTitle = $('.s4-ql .menu-item-text').html();