正如你从我的代码中看到的，我对 JQuery 和 Js 还很陌生。所以对我放轻松一点。
想知道为什么这段代码不起作用，我尝试了许多不同的方式来完成相同的工作，但我似乎无法让它工作......
$(function(){
$("<ul id='list'> <li></li> <li></li> <li></li> <li></li> </ul").insertAfter(".content h1");
$("#list li:nth-child(1)").html("<a>",getH2(1),"</a>");
});
function getH2(number) {
return $(".content h2:nth-of-type(",number,")").text();
}
这里是完整的 html 文档，(仅用于测试，因此代码可能不完美)
<!DOCTYPE html>
<html>
<head>
<title>Specials | The Landon Hotel</title>
<link rel="stylesheet" href="style/style.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<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 & 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/>
</div>
<script>
$(function(){
$("<ul id='list'> <li></li> <li></li> <li></li> <li></li> </ul>").insertAfter(".content h1");
$("#list li:nth-child(1)").html("<a>",getH2(1),"</a>");
});
function getH2(number) {
return $(".content h2:nth-of-type("+number+")").text();
}
</script>
</body>
</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 & 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 Fiddle demo用于实验和开发。
您原来发布的 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 & 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 Fiddle demo .
引用文献:
-
JavaScript:
- jQuery:
-
append(). -
get(). -
insertAfter(). -
map().
-
关于javascript - Jquery简单函数和.html()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32237369/