jquery - 如何通过 jQuery 嵌套 anchor 链接？

Question

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

这是我原来的 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 个这样的 anchor ;(

再次感谢您的帮助!

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 的心态基本上是:获取每个 h3 并添加链接(如果它前面有段落)。

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

他向上思考，我向下思考;)