Changing HTML content using jQuery

Question

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>

To this one:

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

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?

EDIT Clarify post

• As many can see I trying to change a code generated in CodeIgniter but as part of a CMS called PyroCMS so change the way in how pagination links are generated could be a problem later with Pyro Team updates or new releases so this isn't an option
• In the other part changing static wont work because links are generated dinamically so today as the example show are 1,2,3,4 but maybe tomorrow can be 1,2,3 or 1,2,3,4,5,6 or wathever

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

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

Answer 1

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