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有一个很好的prepend和append指南，但在这个特定情况下它们都没有帮助我。感谢有关情况的任何消息，我得到了大约40个我必须添加的锚点;（

再次感谢您的帮助！

Answer 1

怎么样：

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

Demo.

编辑基于我们尊敬的@Felix Kling的输入：

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

Demo.

Answer 2

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的答案很好而且很短~~你应该选择这个~~ 编辑：显然，答案似乎很好，它不会添加指向最后一个标题的最后一段的链接。

我仍然会在这里留下这个答案，因为它显示了解决问题的另一种方式。

karim的心态基本上是：取每个h3并添加链接，如果它前面有一个段落。

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

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

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/

如何通过jQuery嵌套锚链接？

3 个答案: