Is jQuery splitting into HTML tags ie broken into each instance of h2 tags?

Question

I try to find all the <h2> tags by breaking them and attaching them to the <a href=''></a> around them. I'm so close but stuck.

 <script type="application/javascript"> $(document).ready(function() { // finds all h2 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 from the variable above al to a div called .text $('.text').html('<ul>' + al + '</ul>'); }); </script> 

This is my conclusion 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 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='#'> 

Okay, so at the moment I can split them into ? because every question ends with ? but my problem is that this does not take into account the first question.

So my solution is to break them into <h2> tags, is this possible or is there a better option I've tried so many?

Answer 1

Brilliant it helped a lot. I'm just trying to understand the code, so I can use it in the future. I am new to jquery and want to learn;)

Here is the webpage I'm working on and the full code so you can see the result. You may be able to do this.

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 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> 

Answer 2

If you need to do this, why not just use jQuery to replace each of the h2 elements with an anchor a , and then add <br /> after that?

 $('h2').after('<br />').replaceWith(function() { return $('<a>', { href: '#', text: $(this).text() }); }); 

It is much better and cleaner, without the hassle of trying to parse HTML with regular expression. Alternatively, if you need a new ul element with all h2 tags, then use this:

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

In addition, anchors and <br> tags in ul lists are not allowed - why not use the elements of the li list?

---

In fact, the best way to accomplish what you are trying to do here is to use your side code to generate #hash and id for each of the anchor elements and h2 . However, if you want to do this using client-side Javascript, then this would be better:

 var ul = $('<ul>'); $('#wrapper h2').each(function(){ var t = $(this); $('<a>', { text: t.text(), href: '#', click: function(e){ $('body').animate({scrollTop: t.offset().top}, 'fast'); e.preventDefault(); } }).wrap('<li>').parent().appendTo(ul); }).prependTo('.left-col'); 

In addition, you can hide all p elements after each h2 element and show them only when h2 element is pressed

 $('.left-col p').hide(); $('.left-col h2').click(function(){ $(this).nextUntil('h2').toggle(); }); 

The functions fadeToggle() and slideToggle() also available if you want something more unusual.