JQuery的遍歷DOM並提取節點值

Question

我有以下DOM：

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

但變量link永遠是不確定的，當我希望它返回文本中指定的節點。我已經閱讀了幾個小時的jquery文檔，但是我必須用我的邏輯（或者缺乏）來丟失一些東西。

理解任何幫助...

Answer 1

嘗試：

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

qtip-title實際上並不是qtip-active一個孩子。

只是爲了澄清：

$("a > b") 

意味着集中的所有b是a元素的孩子的，而：

$("a b") 

意味着集合中的所有b元素是後裔a的元素。

並且當然qtip-title不是輸入元素，所以使用text()而不是val()。

Answer 2

jQuery的val函數返回一個表格元素（<input>，<select>，或<textarea>）的值。

您的.qtip-title是一個普通的HTML元素，所以您應該調用jQuery的text()函數來獲取元素的內容。

---

此外，您正在使用錯誤的選擇器。 A > B是child selector，並且將與A元素內的所有B元素直接匹配。

你需要寫$('.qtip-active .qtip-title)，使用descendant selector，以匹配出現內部.qtip-active任何地方都.qtip-title元素。

---

由於ryanulit指出，還需要第二選擇更改爲$('.qtip-active .button-container')。