How can I get, manipulate and replace a text node using jQuery?

Question

Here is my code:

<li class="det_price">
    <a href="/designer/customize/278258?dpid=1">Printing</a> from $10 
</li>

I have about fifteen chunks like this on any given page, and I'd like to take the text node (from $X), select X using a regular expression and set it to a numeric variable, then multiply it by a %, and append it to the original node. For example, if the original node said "from $10" I would like to replace it with "from $10 to $2.60". I can do this using replace() and regular expressions on a single node, but I'm having trouble iterating through all of them with jQuery. Can I apply such a transformation to a jQuery object, or do I need to convert it somehow and then use standard Javascript functions?

Thanks!

Answer 1

Here's how to select a text node.

Here's (the skeleton of) what you do once you've got 'em:

$('li.det_price').contents().filter(function()
{ 
    return this.nodeType == 3;
}).text(function (i, text)
{
    return text.replace(/* your schtuff here */);
});

---

So apparently jQuery doesn't play that nicely with text nodes

Time to get (a little) hacky:

var rnotwhite = /\S/; // to omit text nodes that are solely white space
                      // tweak this as needed
$('li.det_price').contents().filter(function()
{ 
    return this.nodeType === 3 && rnotwhite.test($(this).text());
}).text(function (i, text)
{
    this.replaceWholeText(text + ' replaced');
    // or, for more cross-browser-ness
    // this.nodeValue = text + ' replaced';
});

--> Check out this sweet demo <--

--> IE-compatible demo here <--

Now here's the deal: if you have control of the markup, the best solution for this is to wrap the text nodes you're actually interested in, in <span>s, like this:

<li class="det_price">
  <a href="/designer/customize/278258?dpid=1">Printing</a><span> from $10</span>
</li>

and then you can just do this (way less sketch, IMO):

$('li.det_price > a + span').text(function (i, text)
{
    return text + ' replaced';
});

--> More demo goodness <--

Answer 2

You need to use the each function:

$("li.det_price a").each(function(index, Element){
   //Element holds the current anchor, manipulate it's contents at will
   $("Element").val("some new value...");
})

Answer 3

$("li.det_price a").text() would get you the text of that LI (and, unfortunately, of all LI nodes with that class reference). To get just the text of that particular LI you would have to give it an ID, or find some other way to identify it uniquely.

Once you do identify it uniquely, you could simply put a string in the .text() braces to change what you had. For example,

$("li.det_price a").text('Not Printing') would change your text above from 'Printing' to 'Not Printing'.