[jQuery] Wrapping non empty text node with

[Jacky]

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:
<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
網絡暴民 http://jacky.seezone.net