开发者

How to nest anchor links via jQuery?

开发者 https://www.devze.com 2023-04-06 23:33 出处:网络
Looking for a great way to add anchor links within my HTML document after my pattern of H3 and the last p element block.

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/

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号