jQuery簡單函數和.html（）
[英]Jquery simple function and .html()
問題描述
從我的代碼中可以看到，我對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>
1 個解決方案
解決方案1
2 已采納 2015-08-26 22:53:38
解決了輸入錯誤后，您的原始代碼似乎可以工作，並給出：
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演示 。
原始發布的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演示 。
參考文獻：
- JavaScript：
- jQuery的：
-
append()。 -
get()。 -
insertAfter()。 -
map()。
-
簡單但奇怪的HTML，jQuery問題。 功能循環無故
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.