寻找一种在我的 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 ;(
再次感谢您的帮助!
最佳答案
var link = '<p align="right"><a href="#">back to top</a></p>';
$('#container h3').each(function() {
$(this).nextUntil('h3', 'p').last().after(link);
});
应该可以解决问题。
更新:卡里姆的答案很好,很简短你应该选择这个编辑:显然,就像答案看起来一样好,它不会添加指向最后一个标题的最后一段的链接。
我仍然会在这里留下这个答案,因为它展示了解决问题的不同方法。
karim 的心态基本上是:获取每个 h3
并添加链接(如果它前面有段落)。
我的方法是:获取每个 h3
并找到最后一段(在下一个 h3
之前)并附加链接。
他向上思考,我向下思考;)
关于jquery - 如何通过 jQuery 嵌套 anchor 链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7501986/