Utilisez JQuery pour cibler le texte non enveloppé à l'intérieur d'un div.

Question

J'essaie de trouver un moyen d'envelopper uniquement le texte interne d'un élément, je ne veux pas cibler d'autres éléments internes du domaine. Par exemple.

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

Je veux utiliser jQuery pour ce faire.

<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>

Un peu de contexte est que j'ai besoin de faire une structure d'arbre interne élément ui, donc je suis en utilisant la structure UL pour représenter cela. Mais je ne veux pas que les développeurs aient à faire un formatage spécial pour utiliser le widget.

mise à jour : je voulais juste ajouter le but de ceci est que je veux ajouter un écouteur de clic pour pouvoir développer les éléments sous le li, Cependant, puisque ces éléments sont à l'intérieur du li, l'écouteur de clic s'activera même en cliquant sur les enfants, Donc je veux l'attacher au texte à la place, pour faire ceci le texte doit être ciblable, c'est pourquoi je veux l'envelopper dans un div qui lui est propre.

Jusqu'à présent, j'ai réussi à envelopper tous les éléments internes du li dans un div, puis à déplacer tous les éléments internes du dom vers le parent d'origine. Mais ce code est assez lourd pour quelque chose qui pourrait être beaucoup plus simple et ne pas nécessiter autant de manipulation du DOM.

EDIT : Je souhaite partager la première pseudo alternative que j'ai trouvée, mais je pense qu'elle est très exigeante pour ce que je veux accomplir.

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"));
});

J'ai répondu : J'ai fini par faire ce qui suit, pour info, je n'ai à m'occuper que de la compatibilité avec FF et IE, donc ce n'est pas testé dans les autres navigateurs.

    //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

Utilisez wrapInner() :

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

Démonstration de JS Fiddle .

---

Modifié pour répondre à la préoccupation, soulevée par le PO, dans les commentaires ci-dessous :

wrap inner enveloppera tous les éléments à l'intérieur de l'élément li avec le div Je veux juste cibler le texte.

Ce code modifié doit envelopper seulement textNode s :

$('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" />');
            }
        }
    });​

Démonstration de JS Fiddle .

Références :

• wrapInner() .

Answer 2

Au cas où vous souhaiteriez avoir plus d'options, voici une question avec plusieurs autres façons de trouver des nœuds de texte : Comment sélectionner des nœuds de texte avec jQuery ?

Answer 3

Pourquoi ne pas utiliser des expressions régulières ? Supposons que votre racine UL a un ID myTree alors :

// 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);