使用JQuery来定位div中的未包装文本

Question

我试图找到一种方法来包装元素的内部文本,我不想要任何其他内部dom元素.例如.

<ul>
  <li class="this-one"> 
  this is my item
   <ul>
    <li>
       this is a sub element
    </li>
   </ul>
  </li>
</ul>

我想用jQuery来做这件事.

<ul>
   <li class="this-one"> 
       <div class="tree-item-text">this is my item</div>
       <ul>
        <li>
           <div class="tree-item-text">this is a sub element</div>
        </li>
       </ul>
      </li>
    </ul>

一点背景是我需要制作一个内部树结构ui元素,所以我使用UL结构来表示这一点.但我不希望开发人员必须使用任何特殊格式来使用窗口小部件.

更新:我只是想添加这个的目的是我想添加一个点击监听器,以便能够扩展li下的元素,但是,由于这些元素都在li内,因此点击监听器即使在点击子项时也会激活,所以我想把它附加到文本上,为此,文本需要是可定位的,这就是为什么我想把它包装在它自己的div中.

到目前为止,我已经想出了将div中的所有内部元素包装在div中,然后将所有内部dom元素移回原始父元素.但是这个代码非常重,可能更简单,不需要那么多DOM操作.

编辑:想要分享我想出的第一个伪替代品,但我认为这是我想要完成的任务.

var innerTextThing = $("ul.tree ul").parents("li").wrapInner("<div class='tree-node-text'>");

$(innerTextThing.find(".tree-node-text")).each(function(){
   $(this).after($(this).children("ul"));
});

回答:我最后做了以下工作,仅供参考,我只需要担心FF和IE的兼容性,所以在其他浏览器中没有经过测试.

    //this will wrap all li textNodes in a div so we can target them.
    $(that).find("li").contents()
      .filter(function () {
          return this.nodeType == 3;
      }).each(function () {
          if (
          //these are for IE and FF compatibility
                (this.textContent != undefined && this.textContent.trim() != "")
                ||
                (this.innerText != undefined && this.innerText.trim() != "")
              ) {
              $(this).wrap("<div class='tree-node-text'>");
          }
      });

Answer 1

用途wrapInner():

?$('li').wrapInner('<div class="tree-item-text" />');?

JS小提琴演示.

编辑在以下评论中解决了OP提出的问题:

包装内将包裹内的所有元素li用div,我只是想指定的文本.

这个修改过的代码应该只包装textNodes:

$('li').each(
    function(){
        var kids = this.childNodes;
        for (var i=0,len=kids.length;i<len;i++){
            if (kids[i].nodeName == '#text'){
                $(kids[i]).wrap('<div class="tree-item-text" />');
            }
        }
    });?

JS小提琴演示.

参考文献:

• wrapInner().