JQuery пересекает DOM и извлекает значение узла - PullRequest
Новая
       23

JQuery пересекает DOM и извлекает значение узла

1 голос
/ 25 марта 2010

У меня есть следующий 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 в течение нескольких часов, но, должно быть, мне чего-то не хватает в моей логике (или ее там нет).

Любая помощь приветствуется ...

Ответы [ 2 ]

4 голосов
/ 25 марта 2010

Попробуйте: 

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

qtip-title на самом деле не ребенок qtip-active.

Просто чтобы уточнить: 

$("a > b")

означает набор всех b, которые являются дочерними элементами a элементов, тогда как: 

$("a b")

означает набор всех b элементов, которые являются потомками из a элементов.

И, конечно, qtip-title не является элементом ввода, поэтому используйте text(), а не val().

4 голосов
/ 25 марта 2010

Функция jQuery val возвращает значение элемента формы (<input>, <select> или <textarea>).

Ваш .qtip-title является обычным элементом HTML, поэтому вы должны вызвать функцию jQuery text(), чтобы получить содержимое элемента.

Кроме того, вы используете неправильный селектор. A > B является дочерним селектором и будет соответствовать всем элементам B, которые непосредственно внутри элемента A.

Вам нужно написать $('.qtip-active .qtip-title), используя селектор потомков , чтобы соответствовать всем .qtip-title элементам, которые появляются где-либо внутри .qtip-active.

Как указывает ryanulit, вам также нужно изменить второй селектор на $('.qtip-active .button-container').

...