[jQuery] Wrapping non empty text node with <span>

[jQuery] Wrapping non empty text node with <span>

Hi all,
I'm looking for a way to wrap text node with <span>.
HTML:
<ul id="target">
    <li>Item 1</li>
    <li>Item 5
      <ul>
        <li>Item 5-1</li>
        <li>Item 5-2</li>
        <li>Item 5-3
          <ul>
            <li>Item 5-3-1</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Item 6</li>
  </ul>
Expected Outcome:<br clear="all"><ul id="target">
    <li><span>Item 1</span></li>
    <li><span>Item 5</span>
      <ul>
        <li><span>Item 5-1</span></li>
        <li><span>Item 5-2</span></li>
        <li><span>Item 5-3</span>
          <ul>
            <li><span>Item 5-3-1</span></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><span>Item 6</span></li>
  </ul>
Currently I do it by:
$("#target > li").find("li").each(function(){
    if(this.childNodes[0] && this.childNodes[0].nodeType == 3){
        var data = $.trim(this.childNodes[0].data);
        if(data){
            this.childNodes[0].data = data;
            $(this.childNodes[0]).wrap("<span></span>");
        }
    }
});
I wonder if there is any simpler way to do this?
--
Best Regards,
Jacky
網絡暴民 <a href="http://jacky.seezone.net">http://jacky.seezone.net</a>