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()功能也都具備。