jQuery split at HTML tags i.e split at every instance of the h2 tags?

问题

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?

回答1:

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

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

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

var ul = $('<ul>');

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

Also, anchors and <br> tags in ul lists is not valid - why not use li list elements instead?

Actually, the best way to accomplish what you're trying to do here is to use your sever side code to generate a #hash and id for each of the anchors and h2 elements. However, if you want to do this with 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');

Alternatively, you can hide all of the p elements after each h2 element and only show them when the h2 element is clicked

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

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

回答2:

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>

来源：https://stackoverflow.com/questions/4214099/jquery-split-at-html-tags-i-e-split-at-every-instance-of-the-h2-tags

标签

jquery

join

split

find