multi text node manipulation with jQuery

Question

If I have the following html structure:

<ol>
<li>
    Text A <span>Other text</span>, Text B
</li>
<li>
    Text A <span>Other text</span>, Text B
</li>
</ol>

How do I iterate through each list item using jQuery and change the text for both Text A and Text B individually without disturbing the span and it's contents?

Answer 1

$("ol li").contents().filter(function() { 
  return this.nodeType === 3;}
);

in other words fiddle:

$("ol li").contents().filter(function() { 
  return this.nodeType === 3;}
).each(function(i, obj){
  //your code using i, obj or this for choose
  this.textContent = "change";
});