使用javascript（jquery）修改html代码

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网页与razor。这样做的目的是让 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();

然后您可以使用变量输出来做任何您喜欢的事情。