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')。