Question

我需要更改此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中生成的代码，但作为CMS的一部分，称为PyroCMS，因此更改生成分页链接的方式可能会在以后使用Pyro Team更新或新版本时出现问题，因此这不是'选项
在另一部分改变静态不会起作用，因为链接是在动态生成的，所以今天示例节目是1,2,3,4但明天可能是1,2,3或1,2,3,4,5 ，6或wathever

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

编辑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);

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

Answer 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属性，但你明白了）

使用jQuery更改HTML内容

2 个答案: