div内のアンラップされたテキストをターゲットにするためにJQueryを使用する

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構造を使用しています。しかし、私は開発者がウィジェットを使用するために特別なフォーマットを行う必要はありません。

update：私はちょうどこの目的を追加したいのですが、私はliの下にある要素を展開できるようにクリックリスナーを追加したいと思います。しかし、これらの要素はli内にあるので、クリックリスナーは子どもをクリックするので、代わりにテキストに添付したいので、これを行うにはテキストをターゲットに設定する必要があります。そのため、私はそれを自分のdivにラップしたいのです。

これまでのところ、divの中のliのすべての内側要素をラップし、元の親にすべての内側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")); 
}); 

： 私はFYI私は、それは他のブラウザでテストされていないですので、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

を、ここではテキストノードを見つけるにはいくつかの他の方法との質問です：How do I select text nodes with jQuery?

Answer 2

使用wrapInner()：

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

JS Fiddle demo。

divでli内のすべての要素をラップする内側のラップが、私はちょうどターゲットにしたい：

---

以下のコメントでは、OPが提起した懸念に対処するためにを編集テキスト。

$('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 Fiddle demo：

この改正コードはtextNode Sをラップする必要があります。

参考文献：

• wrapInner()。

Answer 3

正規表現を使用するとどうなりますか？その後、ID myTreeありULあなたのルートと想定します。あなたには、いくつかのより多くのオプションが欲しい場合

// Get all the HTML inside the UL. 
var html = $("#myTree").html(); 
// Wrap all text nodes with DIVs. 
html = html.replace(/>([^<]+)</gi, "><div class='tree-item.text'>$1</div>"); 
// Put it back. 
$("#myTree").html(html);