Question

I am trying to find all <h2> tags the split them and join them with <a href=''></a> around them. I am so close but stuck.

<script type="application/javascript">
$(document).ready(function() {


// finds all h2's within wrapper div grabs the text splits at ? and applies a links around each one
var al = $('#wrapper').find('h2').text().split("?").join("?</a><br /> <a  href='#'>");

// Add all the split h2's from the variable above al to a div called .text
$('.text').html('<ul>' + al + '</ul>');


});      
</script>

This is my output from alert(al):

Appropriate Media – Why radio?</a><br /> <a  href='#'>Can someone come and speak at my church?</a><br /> <a  href='#'>Do you distribute radios?</a><br /> <a  href='#'>Do you partner with other organisations?</a><br /> <a  href='#'>How is Feba funded?</a><br /> <a  href='#'>What are your programmes about?</a><br /> <a  href='#'>What denomination does Feba belong to?</a><br /> <a  href='#'>What happened to the Chrysolite?</a><br /> <a  href='#'>What is airtime?</a><br /> <a  href='#'>What is Feba's Statement of Faith?</a><br /> <a  href='#'>Where are the programmes made?</a><br /> <a  href='#'>Where can I find out about the languages & countries you broadcast in?</a><br /> <a  href='#'>Where does the name Feba come from?</a><br /> <a  href='#'>Who do you broadcast to?</a><br /> <a  href='#'>Why do you broadcast on short wave?</a><br /> <a  href='#'> 

Ok so at the moment I am able to split them at the ? because each question end with a ?, but my issue is this misses out the first question.

So my solution would be to split them at the <h2> tags is this possible or is there a better option i have tried so many?

Answer 1

Brilliant this worked thanks a lot. I am just trying to understand the code so i can utilize it in the future. I am pretty new to jquery and want to learn 😉

Here is the webpage i am working on and full code so you can see the result. You might see an better way off doing it.

http://www.giveradio.org.uk/faqs

<script type="application/javascript">
    $(document).ready(function() {

    var al = $('.text');

    $('h2').each(function(){
        $('<a>', {
            text: $(this).text(),
            href: '#'
        }).wrap('<li>').parent().appendTo(al);
    });

    $('.text a').click(function(e) {

    e.preventDefault(); 

    // Removes h2 class jump which is added below
    $('h2').removeClass('jump');

    // Grabs the text from this a link that has been clicked
    var alink = $(this).text(); 

    // filters through all h2's and finds a match off text above and add class jump
    $('h2:contains("' + alink +'")').addClass("jump");

    // scrollto the h2 with the class jump
    $('html,body').animate({scrollTop: $("h2.jump").offset().top},'fast');

    return false;

    }); 


    });                  
    </script>