JQuery traverse DOM and extract node value

Question

I have the following 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>

But the variable link is always undefined when I would expect it to return the text the node specified. I've been reading the jquery documentation for a few hours but I must be missing something with my logic (or lack there of).

Any help appreciated...

Answer 1

jQuery's val function returns the value of a form element (<input>, <select>, or <textarea>).

Your .qtip-title is a regular HTML element, so you should call jQuery's text() function to get the contents of the element.

---

Also, you're using the wrong selector. A > B is the child selector, and will match all B elements that are directly inside an A element.

You need to write $('.qtip-active .qtip-title), using the descendant selector, to match all .qtip-title elements that appear anywhere inside .qtip-active.

---

As ryanulit points out, you also need to change the second selector to $('.qtip-active .button-container').

Answer 2

Try:

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

qtip-title isn't actually a child of qtip-active.

Just to clarify:

$("a > b")

means the set of all b that are children of a elements whereas:

$("a b")

means the set of all b elements that are descendants of a elements.

And of course qtip-title isn't an input element so use text() not val().