jQuery divisé en balises HTML i.e divisé à chaque instance des balises h2?

Question

J'essaie de trouver tous les <h2> les étiquettes les diviser et les joindre avec <a href=''></a> autour d'eux. Je suis si proche mais coincé.

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

Ceci est ma sortie d'alerte (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, donc pour le moment je suis en mesure de les diviser au ? parce que chaque question se termine par un ?, mais ma question est ceci rate la première question.

Donc, ma solution serait de les diviser au <h2> tags est-ce possible ou y at-il une meilleure option que j'ai essayé tant?

Answer 1

Brillant cela a fonctionné beaucoup merci. J'essaie juste de comprendre le code pour que je puisse l'utiliser à l'avenir. Je suis assez nouveau à jquery et veux apprendre;)

Voici la page Web sur laquelle je travaille et le code complet afin que vous puissiez voir le résultat. Vous pourriez voir une meilleure façon de le faire.

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> 

Answer 2

Si vous devez faire cela, alors pourquoi ne pas simplement utiliser jQuery pour remplacer chacun des éléments h2 avec une ancre a, puis ajoutez un <br /> après?

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

Beaucoup mieux et plus propre, sans les tracas d'essayer d'analyser HTML avec regex. Sinon, si vous avez besoin d'un nouvel élément ul avec toutes les balises h2, puis utilisez ceci:

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

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

En outre, les ancres et <br> balises dans ul listes n'est pas valide - pourquoi ne pas utiliser li éléments de la liste à la place?

---

En fait, la meilleure façon d'accomplir ce que vous essayez de faire ici est d'utiliser votre code côté sever pour générer un #hash et id pour chacun des points d'ancrage et h2 éléments. Cependant, si vous voulez faire avec JavaScript côté client, alors ce serait mieux:

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'); 

Vous pouvez masquer tous les p éléments après chaque élément h2 et ne les montrer quand l'élément h2 est clique

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

Les fadeToggle() et slideToggle() fonctions sont également disponibles si vous voulez quelque chose de plus de fantaisie.