jQuery分裂为HTML标签，即在每个h2标签的实例处分割？

Question

我正在尝试查找所有<h2>标签将其拆分并将它们与<a href=''></a>加在一起。我很亲密，但卡住了。

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

这是警告我的输出（人）：

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='#'> 

好了，所以此刻我能，因为每个问题有?结束他们在?分裂，但我的问题是这忽略了第一个问题。

所以我的解决方案是将它们拆分为<h2>标签这是可能的还是有更好的选择，我已经尝试了这么多？

Answer 1

辉煌这工作非常感谢。我只是想了解代码，以便将来可以使用它。我很新的jquery，并想学习;）

这是我正在工作的网页和完整的代码，所以你可以看到结果。你可能会看到更好的办法。

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

如果您需要这样做，那么为什么不使用jQuery替换元素中的每一个元素，然后在a之后添加<br />？

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

更好，更干净，没有试图用正则表达式解析HTML的麻烦。另外，如果你需要的所有h2标签的新ul元素，然后使用此：

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

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

此外，锚和<br>标签ul列表是无效的 - 为什么不使用li列表中的元素呢？

---

实际上，完成你想在这里做什么是最好的方法是使用你的服务器端代码生成每个锚和h2元素#hash和id。但是，如果你想与客户端JavaScript要做到这一点，那么这将是更好的：

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

或者，您也可以在每个h2元素之后隐藏所有p元素，只告诉他们当h2元素点击

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

，如果你想要的东西更看中的fadeToggle()和slideToggle()功能也都具备。