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

jQuery的val函数返回表单元素的值（<input>，<select>或<textarea>）。

您的.qtip-title是一个常规HTML元素，因此您应该调用jQuery的text()函数来获取元素的内容。

另外，你使用了错误的选择器。 A > B是child selector，会匹配B元素中直接的所有A元素。

您需要使用descendant selector撰写$('.qtip-active .qtip-title)，以匹配.qtip-title内任何位置显示的所有.qtip-active元素。

正如ryanulit指出的那样，您还需要将第二个选择器更改为$('.qtip-active .button-container')。

Answer 2

尝试：

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

qtip-title实际上并不是qtip-active的孩子。

只是为了澄清：

$("a > b")

表示b元素的所有a的集合，而不是：

$("a b")

表示b元素后代的所有a元素集。

当然qtip-title不是输入元素，因此请使用text()而不是val()。

JQuery遍历DOM并提取节点值

2 个答案: