Replace value in unordered list (html) + JQuery

Question

Hi, I got this:

<ul id="navigation">
            <li id="nav-d1"><a href="#d1"><span>D1</span></a></li>
            <li id="nav-d2"><a href="#d2"><span>D2</span></a></li>
            <li id="nav-d3"><a href="#d3"><span>D3</span></a></li>

 </ul>

I need to change just the values between <span> and </span> D1, D2, D3 with JQuery, with new values like X1,X2,X3 with JQuery.

Answer 1

$('#nav-d1 span').text('X1') would change <span>D1</span> to <span>X1</span>

Answer 2

use

$('#navigation').find('span').each(function(){
    var $this = $(this);
    $this.text(function(i, curr){
         return curr.replace(/D/, 'X');
    });
});

That would fit exactly your example.