使用jQuery更改HTML内容 [英] Changing HTML content using jQuery

问题描述

我需要更改此HTML：

I need to change this 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的样本还不足以让这项工作得到任何建议？

Using jQuery. I think to use the method .replaceWith() but don't know how to maitain values. Samples for doc aren't enough to get this working, any advice?

编辑澄清帖子

• 看到我试图改变CodeIgniter中生成的代码，但是作为一个称为PyroCMS的CMS的一部分，所以改变生成分页链接的方式可能是Pyro Team更新或新版本的一个问题，所以这不是一个选项。 >
  
• 另一方面，改变静态不会工作，因为链接是如此生成的，所以今天的示例显示是1,2,3,4，但也许明天可以是1,2,3或1,2， 3,4,5,6或wathever

EDIT 2 ：为UL添加了一个容器，所以我可以使用 $（'。wp-pagenavi'）而不是 ul

EDIT 2: added a container for the UL so I can use $('.wp-pagenavi') instead of just ul

编辑3解决方案：基于@lewsid（你不给我答案，但是帮助我自己找到一个解决方案，所以我会接受你的答案）解决方案，并帮助我建立我的拥有它就像我想要的那样工作，这里是代码：

EDIT 3 Solution: based on @lewsid (you not give me the answer but help to find a solution by myself so I'll accept your answer) solution and help I build my own that just works as I want, here is the code:

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

推荐答案

有更优雅的方式来做到这一点，但是这是一个快速而肮脏的解决方案，您可以尝试。假设输出是在一个类别为'输出'的div里面。

There are far more elegant ways to do this, but here's a quick-and-dirty solution you might try. Assuming the output is inside a div with a class of 'output':

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

这篇关于使用jQuery更改HTML内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！