-1

我需要更改此 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">→&lt;/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 或不管怎样

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

2 回答 2

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();
于 2013-04-29T17:22:04.400 回答
-1

它必须与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 属性，但你明白了）

于 2013-04-29T17:28:32.303 回答