如何通过 jQuery 嵌套锚链接？

Question

正在寻找一种在 H3 模式和最后一个 p 元素块之后在 HTML 文档中添加锚链接的好方法。

这是我原来的 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>content</p>
    <p>content</p>

    <h3 id="faqd">title</h3>
    <p>content</p>
</div>

我想要...

<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>

这是迄今为止我诚实的努力，但到目前为止还没有答案...

$("#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>'); 
}
});

jQuery API 在前置和附加方面有一个很好的指南，但在这种特定情况下它们都没有帮助我。感谢您对情况的任何了解，我必须添加大约 40 个锚点；（

再次感谢您的帮助！

Answer 1

var link = '<p align="right"><a href="#">back to top</a></p>';
$('#container h3').each(function() {
    $(this).nextUntil('h3', 'p').last().after(link);
});

应该可以解决问题。

DEMO

更新： karim 的回答很好，很简短< del>你应该选择这个 编辑：显然，尽管答案看起来不错，但它没有添加到最后一个标题的最后一段的链接。

我仍然会在这里留下这个答案，因为它展示了解决问题的不同方法。

karim 的思维方式基本上是：获取每个 h3 并添加链接（如果它前面有一个段落）。

我的方法是：获取每个 h3 并找到最后一段（在下一个 h3 之前）并附加链接。

他向上思考，我向下思考；）

Answer 2

怎么样：

$("#container h3").each(function() {
    if($(this).prev("p").length) {
        $(this).before("<p><a href='#'>fake link</a></p>");   
    }
});

演示。

根据我们尊敬的@Felix Kling的输入进行编辑：

$("h3").prev("p").after("<p><a href='#'>Back to top</a></p>");

演示。

Answer 3

//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);
}

演示： http://jsfiddle.net/TDSSd/