Jquery简单函数和.html()

当你的原始代码，一旦拼写错误已经解决，似乎工作，给:

function getH2(number) {
    return $(".content h2:nth-of-type(" + number + ")").text();
}
$(function () {
    $("<ul id='list'> <li></li> <li></li> <li></li> <li></li> </ul>").insertAfter(".content h1");
    $("#list li:nth-child(1)").html("<a href='#'>" + getH2(1) + "</a>");
});

function getH2(number) {
  return $(".content h2:nth-of-type(" + number + ")").text();
}
$(function() {
  $("<ul id='list'> <li></li> <li></li> <li></li> <li></li> </ul>").insertAfter(".content h1");
  $("#list li:nth-child(1)").html("<a href='#'>" + getH2(1) + "</a>");
});

#list {
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    <img src="img/header.png">
  </div>
  <div id="hero">
    <div class="current">
      <img src="img/HomePageImages/Paris.jpg">
    </div>
  </div>
  <nav class="main-navigation" role="navigation">
    <div>
      <ul id="menu-main-menu" class="nav-menu">
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="restaurant-to-room-service.html">Room Service</a>
        </li>
        <li><a href="specials.html">Specials</a>
        </li>
        <li><a href="reservations.html">Reservations</a>
        </li>
        <li><a href="meetings-events.html">Meetings &#038; Events</a>
        </li>
        <li><a href="news.html">News</a>
        </li>
        <li><a href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="content">
    <h1>Specials</h1> 
    <h2>San Francisco, Bernal Heights</h2>
    <h3>Military Family Deal:</h3>
    <p>Active and retired military, and their families, save 20% when booking a three or more day stay at the Landon Hotel in lovely Bernal Heights, San Francisco. Book by August 1st, 2015.</p>
    <h3>Bring Fido:</h3>
    <p>Bring your travel-loving canine to our pet-friendly Bernal Heights Landon Hotel, and see why San Francisco is a dog's paradise, with endless activities and locations that cater to canines. You'll save 10% just for bringing Fido, and there are no hidden
      pet fees. Book by April 30th, 2014.</p>
    <h3>Meeting Mondays:</h3>
    <p>The new Bernal Heights conference room is just the place for your corporate meetings, and if you book for three or more consecutive days, that include a Monday, you'll receive Monday free. Book by September 15th, 2014.</p>
    <hr/>
    <h2>London, West End</h2>
    <h3>Theatre Package:</h3>
    <p>Theatre lovers can enjoy two free tickets to a West End theater production of their choice, when booking a weekend stay at the West End Landon. Tickets are mezzanine level and are limited to available productions at the time of booking. Book by August
      1st, 2015.</p>
    <h3>Shopper's Paradise:</h3>
    <p>Oxford, Regent, and Bond Streets have some of the best shopping in the world, and all are just a tube stop away when you stay at the West End Landon. And, if you book a minimum of five days, you'll get a bonus gift certificate worth $125 to use in
      the boutique of your choice, based on participating vendors at time of booking. Book by November 2015.</p>
    <hr/>
    <h2>Hong Kong, Kwun Tong</h2>
    <h3>Spa Holiday:</h3>
    <p>The Hong Kong is home to a half-dozen world-renowned spas, some tucked away in skyscrapers, others in beachside retreats. You can have your pick of a one-day Spa Holiday if you book a five-consecutive night stay during the months of February through
      April. Book by November 1, 2014.</p>
    <h3>Leisure and Luxury:</h3>
    <p>Stay at the Landon Hotel in the Kwun Tong District and you'll have both leisure and luxury at your fingertips. Play a complimentary round of golf and enjoy a complimentary seaweed body wrap and massage, if you book a weekend stay by August 1st , 2015.</p>
    <hr/>
    <h2>Paris, Latin Quarter</h2>
    <h3>Sweet Deal:</h3>
    <p>Paris is renowned for its delectable pastries and other dessert creations by the most highly skilled chefs in the world. If you book a weekend stay by February 28th, 2015 you'll receive a complimentary dessert tray every night of your stay. Be prepared
      for a sweet feast!</p>
    <h3>Spiritual Walk:</h3>
    <p>The Latin Quarter is the place to tour some of the world's oldest churches and monasteries. You can enjoy a complimentary church walking tour for two, guided by an entertaining and enlightening guide, if you book a weekend stay by March 1, 2015.</p>
    <h3>Holiday Package:</h3>
    <p id="go">Spend the winter holidays in Paris and enjoy festivity and fine food under a star-filled winter sky. You'll receive 15% off your hotel accommodations, if you reserve for 7 consecutive nights in December 2014 or January 2015. Book by October 30th,
      2014.</p>
    <hr/>

外部JS小提琴演示实验和开发。

您原来发布的jQuery的问题如下，关闭</ul>标记有其关闭大于省略(您写:</ul)， JavaScript中的字符串连接是一个加号(+)而不是一个逗号(,):

$(function () {
    $("<ul id='list'> <li></li> <li></li> <li></li> <li></li> </ul")
    // requires the closing '>' ----------------------------------^
        .insertAfter(".content h1");
    $("#list li:nth-child(1)").html("<a>", getH2(1), "</a>");
    // requires replacement, with a + ---^---------^
});

function getH2(number) {
    return $(".content h2:nth-of-type(", number, ")").text();
    // requires replacement, with a + -^-------^
}

我建议使用以下方法，因为它更抽象和更实用，因为它为元素创建了一个'id'(尽管没有，在这个化身中，首先检查'id'是否已经存在)，链接创建的<a>元素，该元素链接到'id' 和，不需要预先存在多少<h2>元素的知识(在您的原始版本中，您调用getH2()并传递索引给它，这可能需要调用该函数四次，并且在每种情况下，都必须为函数调用提供适当的索引)。

话虽如此，我的建议是:

$(function () {
    // creating a <ul> element, using an object to
    // set the named ('id') property of that
    // created element:
    $('<ul />', {
        'id' : 'list'
      // inserting the created-<ul> after the <h1> descendant
      // of the element with the class of 'content':
      }).insertAfter(".content h1")
      // insertAfter returns the original jQuery object,
      // not the element(s) matched by the supplied selector,
      // so here we chain the append() method to supply contents
      // for the created-<ul>:
      .append(function () {
        // here we iterate over the <h2> elements in the document,
        // creating an id for each of the <h2> elements, and then
        // create an Array of HTML creating an <a> element, setting
        // its 'href' to the same 'id' we just created for the <h2>,
        // and settings its text to the same content as the <h2>:
        return '<li>' + $('h2').map(function (i) {
            this.id = 'heading_' + i;
            return '<a href="#heading_' + i + '">' + this.textContent + '</a>';
        // we then join these array elements together with
        // </li><li> to close, then open, <li> elements 
        // (note that the created Array is itself surrounded
        // with an opening '<li>' and a closing '</li>'
        }).get().join('</li><li>') + '</li>'
    });
});

$(function() {
  $('<ul />', {
    'id': 'list'
  }).insertAfter(".content h1").append(function() {
    return '<li>' + $('h2').map(function(i) {
      this.id = 'heading_' + i;
      return '<a href="#heading_' + i + '">' + this.textContent + '</a>';
    }).get().join('</li><li>') + '</li>'
  });
});

#list {
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    <img src="img/header.png">
  </div>
  <div id="hero">
    <div class="current">
      <img src="img/HomePageImages/Paris.jpg">
    </div>
  </div>
  <nav class="main-navigation" role="navigation">
    <div>
      <ul id="menu-main-menu" class="nav-menu">
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="restaurant-to-room-service.html">Room Service</a>
        </li>
        <li><a href="specials.html">Specials</a>
        </li>
        <li><a href="reservations.html">Reservations</a>
        </li>
        <li><a href="meetings-events.html">Meetings &#038; Events</a>
        </li>
        <li><a href="news.html">News</a>
        </li>
        <li><a href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="content">
    <h1>Specials</h1> 
    <h2>San Francisco, Bernal Heights</h2>
    <h3>Military Family Deal:</h3>
    <p>Active and retired military, and their families, save 20% when booking a three or more day stay at the Landon Hotel in lovely Bernal Heights, San Francisco. Book by August 1st, 2015.</p>
    <h3>Bring Fido:</h3>
    <p>Bring your travel-loving canine to our pet-friendly Bernal Heights Landon Hotel, and see why San Francisco is a dog's paradise, with endless activities and locations that cater to canines. You'll save 10% just for bringing Fido, and there are no hidden
      pet fees. Book by April 30th, 2014.</p>
    <h3>Meeting Mondays:</h3>
    <p>The new Bernal Heights conference room is just the place for your corporate meetings, and if you book for three or more consecutive days, that include a Monday, you'll receive Monday free. Book by September 15th, 2014.</p>
    <hr/>
    <h2>London, West End</h2>
    <h3>Theatre Package:</h3>
    <p>Theatre lovers can enjoy two free tickets to a West End theater production of their choice, when booking a weekend stay at the West End Landon. Tickets are mezzanine level and are limited to available productions at the time of booking. Book by August
      1st, 2015.</p>
    <h3>Shopper's Paradise:</h3>
    <p>Oxford, Regent, and Bond Streets have some of the best shopping in the world, and all are just a tube stop away when you stay at the West End Landon. And, if you book a minimum of five days, you'll get a bonus gift certificate worth $125 to use in
      the boutique of your choice, based on participating vendors at time of booking. Book by November 2015.</p>
    <hr/>
    <h2>Hong Kong, Kwun Tong</h2>
    <h3>Spa Holiday:</h3>
    <p>The Hong Kong is home to a half-dozen world-renowned spas, some tucked away in skyscrapers, others in beachside retreats. You can have your pick of a one-day Spa Holiday if you book a five-consecutive night stay during the months of February through
      April. Book by November 1, 2014.</p>
    <h3>Leisure and Luxury:</h3>
    <p>Stay at the Landon Hotel in the Kwun Tong District and you'll have both leisure and luxury at your fingertips. Play a complimentary round of golf and enjoy a complimentary seaweed body wrap and massage, if you book a weekend stay by August 1st , 2015.</p>
    <hr/>
    <h2>Paris, Latin Quarter</h2>
    <h3>Sweet Deal:</h3>
    <p>Paris is renowned for its delectable pastries and other dessert creations by the most highly skilled chefs in the world. If you book a weekend stay by February 28th, 2015 you'll receive a complimentary dessert tray every night of your stay. Be prepared
      for a sweet feast!</p>
    <h3>Spiritual Walk:</h3>
    <p>The Latin Quarter is the place to tour some of the world's oldest churches and monasteries. You can enjoy a complimentary church walking tour for two, guided by an entertaining and enlightening guide, if you book a weekend stay by March 1, 2015.</p>
    <h3>Holiday Package:</h3>
    <p id="go">Spend the winter holidays in Paris and enjoy festivity and fine food under a star-filled winter sky. You'll receive 15% off your hotel accommodations, if you reserve for 7 consecutive nights in December 2014 or January 2015. Book by October 30th,
      2014.</p>
    <hr/>

External JS Fiddle demo.

引用:

• JavaScript:
  • Array.prototype.join() .
  • Node.textContent .
• jQuery:
  • append() .
  • get() .
  • insertAfter() .
  • map() .