Modify html code with javascript (jquery)

Question

How can i get from this code:

<td>
    <a href="/Test/Page/2">Previous</a>
    <a href="/Test/Page/1">1</a>
    <a href="/Test/Page/2">2</a>
    3    
    <a href="/Test/Page/4">4</a>
    <a href="/Test/Page/5">5</a>
    <a href="/Test/Page/4">Next</a>
</td>

to this one:

<div class="pagination">
    <ul>
        <li class="prev"><a href="/Test/Page/2">Previous</a></li>
        <li><a href="/Test/Page/1">1</a></li>
        <li><a href="/Test/Page/2">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="/Test/Page/4">4</a></li>
        <li><a href="/Test/Page/5">5</a></li>
        <li class="next"><a href="/Test/Page/4">Next</a></li>
    </ul>
</div>

Im using jquery and Asp.net WebPages with razor. The point of this is to make WebGrid pagination part to look more awesome :-). Thanks for your help.

Answer 1

Something along the lines of...

var html = $('<td><a href="/Test/Page/2">Previous</a><a href="/Test/Page/1">1</a><a href="/Test/Page/2">2</a>3<a href="/Test/Page/4">4</a><a href="/Test/Page/5">5</a><a href="/Test/Page/4">Next</a></td>');
var anchors = html.find('a');
var anchor_copies = anchors.clone();
html.find('a').remove();

// this should get the remaining number (3) in your example
var orphan = $('<a href="#">' + html.text() + '</a>');

var output = anchors.slice(0,3).add(orphan).add(anchors.slice(3,6));
output = $('<div class="pagination"/>').append($('<ul>').append(output).find('a').wrap('<li/>').end());
output = output.find('li:first').addClass('prev').end().find('li:last').addClass('next').end();

Then you can user the variable output to do whatever you like.