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>

这是我的 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='#'> 

好的，目前我可以在? 拆分它们，因为每个问题都以? 结尾，但我的问题是这错过了第一个问题。

所以我的解决方案是在<h2> 标签处拆分它们，这是可能的还是我尝试了很多更好的选择？

Answer 1

如果您需要这样做，那么为什么不使用 jQuery 将每个 h2 元素替换为 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);
});

另外，ul 列表中的锚点和 <br> 标记无效 - 为什么不改用 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() 函数如果您想要更花哨的东西，也可以使用。

Answer 2

太棒了，非常感谢。我只是想了解代码，以便将来可以使用它。我对 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>