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>

Это мой вывод из оповещения (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 с помощью регулярных выражений. В качестве альтернативы, если вам нужен новый элемент ul со всеми тегами h2, используйте это:

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

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

Кроме того, якоря и теги <br> в списках ul недопустимы - почему бы вместо этого не использовать элементы списка li?

---

На самом деле, лучший способ выполнить то, что вы пытаетесь сделать здесь, - это использовать код на стороне сервера для генерации #hash и id для каждого из якорей и h2 элементов. Однако, если вы хотите сделать это с 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');

Кроме того, вы можете скрыть все элементы p после каждого элемента h2 и отображать их только при нажатии на элемент 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>