JQuery traverse DOM et extraire la valeur de nœud

Question

je les DOM suivantes:

<div class="qtip qtip-light qtip-active"> 
    <div class="qtip-wrapper"> 
     <div class="qtip-borderTop"></div> 
     <div class="qtip-contentWrapper"> 
     <div class="qtip-title"> 
      <div class="qtip-button"></div> 
      **Text I need to extract** 
     </div> 
     <div class="qtip-content"> 
      <div class="tooltip"> 
       <div class="button-container"> 
        <script type="text/javascript"> 
      var link = null; 
      var link = $('.qtip-active > .qtip-title').val(); 
      $('.qtip-active > #button-container').append('<a href=\"mailto:' + link + '\">' + link + '</a>'); 
       </script> 
       </div> 
      </div> 
     </div> 
     </div> 
     <div class="qtip-borderBottom"></div> 
    </div> 
</div> 

Mais la link variable est toujours définie quand j'attendre pour retourner le texte du nœud spécifié. J'ai lu la documentation de jquery pendant quelques heures mais je dois manquer quelque chose avec ma logique (ou l'absence de celle-ci).

Toute aide appréciée ...

Answer 1

Essayez:

var link = $('.qtip-active .qtip-title').text(); 

qtip-title est pas vraiment un enfant de qtip-active.

Juste pour préciser:

$("a > b") 

signifie que l'ensemble de tous b qui sont des enfants de a éléments alors:

$("a b") 

signifie que l'ensemble de tous les b éléments qui sont descendants de a éléments.

Et bien sûr, qtip-title n'est pas un élément d'entrée, utilisez text() et non val().

Answer 2

fonction de jQuery val renvoie la valeur d'un élément de forme (<input>, <select> ou <textarea>).

Votre .qtip-title est un élément HTML standard. Vous devez donc appeler la fonction text() de jQuery pour obtenir le contenu de l'élément.

---

De plus, vous utilisez un mauvais sélecteur. A > B est le child selector, et correspondra à tous les éléments B qui sont directement à l'intérieur d'un élément A.

Vous devez écrire $('.qtip-active .qtip-title), en utilisant le descendant selector, pour correspondre à tous les éléments .qtip-title qui apparaissent partout dans .qtip-active.

---

Comme ryanulit souligne, vous devez également modifier le second sélecteur à $('.qtip-active .button-container').