用javascript（jquery）修改html代码答案

【问题标题】：Modify html code with javascript (jquery)用javascript（jquery）修改html代码
【发布时间】：2011-08-24 10:22:42
【问题描述】：

我如何从这段代码中得到：

<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 分页部分看起来更棒:-)。感谢您的帮助。

【问题讨论】：

到目前为止你做了什么？首先编写发出正确标记的东西会容易得多......
同意，如果我可以自己发出 HTML，我肯定会做对，但我正在尝试使用 Helpers.WebGrid 类，我无法控制分页部分的标记，那又如何这就是为什么我想通过 javascript 完成它。

标签： jquery html dom razor

【解决方案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();

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

【讨论】：