selecting pure text in jquery

[jeroen dijkmeijer]

Hello,

I have a nested list and I would like to put span tags around the text of the headers of sublists.

  
<ul><li>head 1<ul>
<li>item1.1</li>
<li>head1.2<ul>
<li>item1.2.1</li>
</ul></li>
</ul></li></ul>
  

this should become:

  
<ul><li><span>head 1</span><ul>
<li>item1.1</li>
<li>head1.2<ul>
<li><span>item1.2.1</span></li>
</ul></li>
</ul></li></ul>
  

I've tried a few things already:

  
$('li', this).wrapInner('<span></span>');
  

But this puts a span around the text and the UL tag.

  
$('li', this).wrapInner(new function () { return '<span class='+ this.text() + '></span>';});
  

this gives an error (text()) is not a function

  
$('li', this).text().wrapInner('<span></span>');
  

doesn't work at all No error no output.

I'm a bit mystified hopefully somebody here can help me.
kind regards,
Jeroen.

[Bear Bibeault]

Text nodes are special in the DOM -- the wrap functions can only work with element nodes. I'd recommend fetching the text contents, creating a new span with those contents, and then replacing the old contents with the new span element.

[David Newton]

I'd also ask *why* you want to put a span around them--might it be better to add a class to the list element of the header items?

[Eric Pascarello]

Why do you need to do this with JavaScript. Can;t you do this on the serverside to start out with?

Eric