Looking for a great way to add anchor links within my HTML document after my pattern of H3 and the last p element block.
This is my original HTML
<div id="container">
<h3 id="faqa">title</h3>
<p>content</p>
<h3 id="faqb">title</h3>
<p>content</p>
<p>content</p>
<h3 id="faqc">title</h3>
<p>content</p>
<p>content</p>
<p&开发者_如何转开发gt;content</p>
<p>content</p>
<h3 id="faqd">title</h3>
<p>content</p>
</div>
And I want...
<div id="container">
<h3 id="faqa">title</h3>
<p>content</p>
<p align="right"><a href="#">back to top</a>
<h3 id="faqb">title</h3>
<p>content</p>
<p>content</p>
<p align="right"><a href="#">back to top</a>
<h3 id="faqc">title</h3>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p align="right"><a href="#">back to top</a>
<h3 id="faqd">title</h3>
<p>content</p>
<p align="right"><a href="#">back to top</a>
</div>
Here is my honest effort so far, but no answer as of yet...
$("#container").each (function() {
if($(this).find('h3[id*="faq"]')){
var $mpage = window.location.pathname;
$(this).find("p:last").append('<p align="right"><a href="'+$mpage+'">Back to top</a>
</p>');
}
});
The jQuery API has an excellent guide on prepend and append, but neither of them help me in this specific case. Thanks for any light on the situation, I got about 40 of these anchors I have to add ;(
Thanks again for any help!
var link = '<p align="right"><a href="#">back to top</a></p>';
$('#container h3').each(function() {
$(this).nextUntil('h3', 'p').last().after(link);
});
should do the trick.
DEMO
Update: karim's answer is nice and short and you should go with this one Edit: Apparently, as nice as the answer seems, it does not add a link to the last paragraph of the last heading.
I will still leave this answer here, as it shows a different way of approaching the problem.
karim's mindset basically is: Take every h3
and add the link if it was preceded by a paragraph.
Mine was: Take every h3
and find the last following paragraph (before the next h3
) and append the link.
He thought upwards, I downwards ;)
How about:
$("#container h3").each(function() {
if($(this).prev("p").length) {
$(this).before("<p><a href='#'>fake link</a></p>");
}
});
Demo.
EDIT based on our esteemed @Felix Kling's input:
$("h3").prev("p").after("<p><a href='#'>Back to top</a></p>");
Demo.
//get all h3
var h3 = $("#container").find("h3[id^='faq']");
//store anchor html
var anchor = '<p align="right"><a href="#">back to top</a>';
//if h3 exist
if(h3.size()){
// for every p before a h3 and the last p append anchor
h3.prev("p").add("p:last").after(anchor);
}
Demo: http://jsfiddle.net/TDSSd/
精彩评论