jQuery选择器学习遇阻，请求两道选择器编写问题指导

问题背景 #

我报名了一门在线Web开发与设计课程，目前在jQuery学习上遇到了极大困难。我习惯逆向学习模式，即通过成品推导实现方式，再逐步正向学习。现需解决两道选择器编写问题：

• Q2：选择table中包含的class
• Q5：选择包含多个列表项的元素的class

待填充的原始jQuery代码 #

// Q2: Select a class that is contained within a table.
$("#q2").after(
  "<p>"+$(/*INSERT SELECTOR FOR Q2 HERE*/).text()+"</p>"
);


// Q5: Select a class for an element that contains multiple list items.
$("#q5").after(
  "<p>"+$(/*INSERT SELECTOR FOR Q5 HERE*/).text()+"</p>"
);

对应HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>The Roasted Bean</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="styles/site.css"/>
  <script src="scripts/jquery-3.2.1.min.js"></script>
  <script src="scripts/selector.js"></script>
</head>
<body>
  <header>
    <div class="logo">
      <a class="top" href="index.html"><img alt="Coffee Logo" src="images/coffee-logo.png"/></a>
      <a href="index.html"><span class="top">The Roasted Bean</span></a>
    </div>
    <nav>
      <ul>
        <li class="top" id="current_page"><a>Home</a></li>
        <li class="top"><a>Locations</a></li>
        <li class="top"><a>Hours of Operation</a></li>
        <li class="top"><a>About Us</a></li>
      </ul>
    </nav>
    <h1>Home of the Best Coffee in Ithaca</h1>
  </header>
  <main>
    <p>
      Welcome to the Roasted Bean! We are proud to be known as <strong>Home of the Best Coffee in Ithaca</strong> for the last 5 years.
    </p>

    <hr>

    <h2>Hours of Operation</h2>

    <table>
      <tr>
        <th>Sunday</th>
        <td>11:00 AM - 9:30 PM</td>
      </tr>
      <tr>
        <th>Monday</th>
        <td>8:00 AM - 9:30 PM</td>
      </tr>
      <tr>
        <th>Tuesday</th>
        <td>8:00 AM - 9:30 PM</td>
      </tr>
      <tr>
        <th>Wednesday</th>
        <td>8:30 AM - 9:30 PM</td>
      </tr>
      <tr>
        <th>Thursday</th>
        <td>8:00 AM - 9:30 PM</td>
      </tr>
      <tr>
        <th>Friday</th>
        <td>8:00 AM - 11:30 PM</td>
      </tr>
      <tr class="last">
        <th>Saturday</th>
        <td>10:00 AM - 11:30 PM</td>
      </tr>
    </table>
    <p>
      As a family run and owned business, we may have unplanned closures due to weather or sudden occurences. We will do our best to inform our customers as soon as possible. Planned holiday closures will also be posted on our social media sites.
    </p>

    <img class="espresso" src="images/coffee2.jpg" alt="espresso"/>

    <p>
      The Roasted Bean started as a small coffee shop with a menu of only two items, coffee and cinnamon buns. After learning under the masters at the International Coffee Shop, John Doe Sr. was confident in his ability to brew coffee. Jane Doe's cinnamon buns, made from a secret family recipe, in tandem with the coffee, grew to be a favorite among locals and coffee afficionados.
      Following in his parents' footsteps, John Jr. inherited the business in 2014 and has since grown the Roasted Bean to build a second location and to gain state-wide recognition. With the emergence of social media, the Roasted Bean started to attract visitors from outside the area as well. Despite popular attention the Roasted Bean strives to preserve the same great flavors as when it still opened and stay number one to the locals.
    </p>

    <h3>Menu</h3>
    <ul class="menu">
      <li>Our Famous Blend Coffee</li>
      <li>Expresso</li>
      <li>Latte</li>
      <li>Cappucino</li>
    </ul>

    <figure>
      <img src="images/coffee.jpg" alt="coffee"/>
      <figcaption>A cup of our Famous Blend</figcaption>
    </figure>
  </main>

  <footer>
    <p>Copyright 2018 The Roasted Bean</p>
  </footer>
</body>
</html>

问题解答 #

Q2：选择table中包含的class #

观察HTML代码里的table，只有最后一行<tr>带有class="last"，可以用以下选择器定位这个元素：

"table tr.last"

或者更简洁的写法：

"table .last"

填充后的代码片段：

// Q2: Select a class that is contained within a table.
$("#q2").after(
  "<p>"+$("table tr.last").text()+"</p>"
);

这段代码会获取table内带last类的tr的文本内容，并将其添加到#q2元素的后方。

Q5：选择包含多个列表项的元素的class #

HTML中有两个包含多个<li>的<ul>元素：一个在<nav>标签内，另一个是带有class="menu"的菜单列表。结合题目需求，目标是带有menu类的ul元素，直接使用类选择器即可：

".menu"

如果需要更通用的匹配逻辑（比如选中所有包含至少2个列表项的元素），可以使用:has()伪类：

"ul:has(li:nth-child(2))"

但针对当前场景，.menu是最精准的选择。填充后的代码片段：

// Q5: Select a class for an element that contains multiple list items.
$("#q5").after(
  "<p>"+$(".menu").text()+"</p>"
);

这段代码会获取带有menu类的ul的文本内容，并将其添加到#q5元素的后方。

内容的提问来源于stack exchange，提问作者Kristin C.