Jquery simple function and .html()
Question
As you can see from my code I am pretty new to JQuery and Js. So take it easy on me.
Was wondering why this code will not work, I have tried to do the same job many different ways and I just can't seem to make it work....
$(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();
}
Here is the full html doc, (only intended for testing, so the code may not be perfect)
<!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 answers
solution1
2 ACCPTED 2015-08-26 22:53:38
While your original code, once the typos have been addressed, seems to work, giving:
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/>
External JS Fiddle demo for experimentation and development.
The problems with your original posted jQuery is the following, that the closing </ul> tag had its closing greater-than omitted (you wrote: </ul ), and string-concatenation in JavaScript is with a plus symbol ( + ) not a comma ( , ):
$(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 + -^-------^
}
I'd suggest the following instead, for being a little more abstract and functional, in that it creates an 'id' for the elements (though without, in this incarnation, first checking that an 'id' isn't already present), links the created <a> element that links to that 'id' and requires no preexisting knowledge of how many <h2> elements exist (in your original version you were calling getH2() and passing an index to it, which would likely have necessitated calling the function four times and, in each case, having to supply the function call with the appropriate index).
That said, here's my suggestion:
$(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/>
External JS Fiddle demo .
References:
- JavaScript:
- jQuery:
-
append(). -
get(). -
insertAfter(). -
map().
-
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Simple but strange HTML, jQuery issue. Function loops with no reason
What's wrong with this simple jQuery hover and replace HTML function
Simple solution for HTML/JQuery?
Jquery simple function
jquery simple compute function
Simple add function with JQuery
Simple jQuery function not called
jQuery simple function with callback
jQuery simple Data Pass HTML
Simple jQuery element html change
Related Tags