Изменить HTML-код с помощью JavaScript (JQuery)

Question

Как я могу получить из этого кода:

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

к этому:

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

Я использую jquery и Asp.net WebPages с бритвой.Смысл этого в том, чтобы сделать пагинацию WebGrid более привлекательной :-).Спасибо за вашу помощь.

Answer 1

Что-то вроде ...

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

Тогда вы можете использовать выходную переменную, чтобы делать что угодно.