Just starting out using selectors in Javascript and I'm beyond confused. Would anybody mind reviewing and offering guidance?

Viewed 38

I signed up for an online web development and design class and I'm really struggling with jQuery. Would anybody mind looking at this and helping out? I'm the type of person who does better working backwards, if that makes sense. If I can see the finished result, it's easier for me to figure out how it was done, THEN move forward next time. Here are the questions, and I'll post the code I'm supposed to pull from to answer them below:

// 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>"
    );

This is my first time posting so I apologize if it's sloppy. I'm happy to fix any errors, and to receive constructive criticism. Only place I can go from here is up. Thank you in advance.

*<!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>
1 Answers

The only class that is contained within the table is the 'last' class. To select the element with this class you could do:

$('.last') 

will select all elements with the class 'last' on your page. (which in this case only exists within the table).

$('table .last')

will select all elements with the class 'last' that exist within a table on your page.

The menu item contains contains multiple list items and has a class of 'menu'. To select this you could use:

$('.menu')

Which will find all elements with the class 'menu' (in this case only one) or to be more specific:

$('ul .menu')

Which will find all elements that are ul that have the class 'menu'.

Related