使用 jQuery 更改 HTML 内容答案

【问题标题】：Changing HTML content using jQuery使用 jQuery 更改 HTML 内容
【发布时间】：2013-04-23 10:59:52
【问题描述】：

我需要更改此 HTML：

<div class="wp-pagenavi">
    <ul>
        <li class="active">
            <span>1</span>
        </li>
        <li>
            <a rel="start" data-ci-pagination-page="10" href="http://devserver/index.php/blog/page/10">2</a>
        </li>
        <li class="next">
            <a rel="next" data-ci-pagination-page="10" href="http://devserver/index.php/blog/page/10">→</a>
        </li>
    </ul>
</div>

到这个：

<span class="current">1</span>
<a href="#" class="page">2</a>
<a href="#" class="page">3</a>
<a href="#" class="page">4</a>
<a href="#" class="page">5</a>

使用 jQuery。我想使用.replaceWith() 的方法，但不知道如何维护值。 doc 的样本不足以使其正常工作，有什么建议吗？

编辑澄清帖子

正如许多人所看到的，我试图更改 CodeIgniter 中生成的代码，但作为名为 PyroCMS 的 CMS 的一部分，因此更改生成分页链接的方式可能会在 Pyro Team 更新或新版本之后出现问题，所以这不是不是一个选项
在另一部分更改静态将不起作用，因为链接是动态生成的，所以今天示例显示为 1,2,3,4 但明天可能是 1,2,3 或 1,2,3,4,5 ,6 还是不管

EDIT 2：为 UL 添加了一个容器，因此我可以使用 $('.wp-pagenavi') 而不仅仅是 ul

EDIT 3 解决方案：基于@lewsid（您没有给我答案，而是帮助我自己找到解决方案，所以我会接受您的答案）解决方案并帮助我建立自己的解决方案按我的意愿工作，这是代码：

var newContent = "";
$('.wp-pagenavi ul > li').each(function() {
    if ($(this).attr('class') == "active") {
        newContent += "<span class='current'>" + $(this).find("span").html() + "</span>&nbsp;";
    } else {
        newContent += "<a class='page' href='" + $(this).find("a").attr("href") + "'>" + $(this).find("a").html() + "</a>&nbsp;";
    }
});

$('.wp-pagenavi ul').replaceWith(newContent);

【问题讨论】：

为什么要先用code igniter把你想要的HTML弄乱，然后用jquery把它放回去？
@mplungjan 我没有使用 CodeIgniter，我正在使用 PyroCMS（基于它的 CMS）改变分页的生成方式意味着改变 CORE，这将是一个问题，稍后来自 Pyro 的更新团队，出于这个原因，我认为最好是使用 jQuery 或 Javascript 进行更改，否则我是不对的？
您能否展示您想要实施的变更的完整结构？

标签： jquery html dom

【解决方案1】：

有很多更优雅的方法可以做到这一点，但这里有一个快速而简单的解决方案，您可以尝试一下。假设输出在一个具有“输出”类的 div 内：

//Loop over list items
$('.wp-pagenavi ul').each(function(i, obj) {
    var position = i + 1;
    if($(this).hasClass('active')) {
        $('.output').append('<span class="current">'+position+'</span>');
    }
    else {
        $('.output').append('<a href="#" class="page">'+position+'</a>');
    }
});

//Don't need this anymore
$('.wp-pagenavi ul').remove();

【讨论】：

这更有意义，但我得到了这个错误：TypeError: obj.hasClass is not a function: if (obj.hasClass('active')) { 我还编辑了主帖子并添加了一个.wp-pagenavi div，这样你就可以使用$('.wp-pagenavi ul') 而不仅仅是$('ul')
已更新，试一试！

【解决方案2】：

必须与 jquery 一起使用吗？像这样带有innerHTML的简单javascript怎么样：

<ul id="myUl">
    <li class="active">
        Original Content
    </li>
</ul>
<script language="Javascript">
    document.getElementById('myUl').innerHTML = '<span>Content replaced blah blah      </span>';
</script>

（为简单起见，我添加了 id 属性，但你明白了）

【讨论】：

你能分享下投票的原因吗？