JQuery .find() не удалось получить результат .ajax()

Question

Я работаю над расширением Chrome, которое при определенных условиях выполняет запрос $.ajax(), а затем использует информацию об определенных элементах в возвращаемом HTML. На данный момент я просто пытаюсь получить доступ к определенному элементу и зарегистрировать его на консоли, чтобы убедиться, что он работает правильно.

Для начала я уверен, что HTML успешно восстановлен. Когда я регистрирую результат напрямую, результат идентичен результату, когда я просматриваю источник страницы в Chrome. Я также пробовал использовать $.parseHTML(), который при входе в систему дает мне массив детей верхнего уровня. Использование селекторов возвращает массив непосредственных дочерних элементов, соответствующих селектору, но они не работают для элементов, являющихся дочерними элементами этих детей (и т. Д.).

Я уже рассмотрел несколько сообщений и попробовал различные вещи, такие как использование $(<selector>,<context>), $(<result>).filter(<selector>) и $(<result>).find(<selector>) безрезультатно. Каждый раз, когда я пытаюсь записать их, я получаю объект длиной 0.

$.ajax({jsonp: false, dataType: "html",url: getUWFlowLink($(this).attr('href')), success: function(siteHTML){ 

    console.log($("p.description",siteHTML)); 
    console.log($("p.description",$.parseHTML(siteHTML))); 
    console.log($(siteHTML).find("p.description")); 
    console.log($($.parseHTML(siteHTML)).find("p.description")); 
    console.log($(siteHTML).filter("p.description")); 
    console.log($($.parseHTML(siteHTML)).filter("p.description")); 

}}); 

Все эти журналы просто возвращают объекты с длиной 0. Попытка регистрации журнала .html() приводит к выводу undefined, и при попытке зарегистрировать результаты .text() в пустой строке для вывода. Образец страницы, для справки - here. Элемент, к которому я пытаюсь получить доступ, - это описание в верхней части («Химические принципы с приложениями ...»), а его расположение в HTML (на несколько уровней) можно найти, проверив элемент.

Answer 1

Try что-то вроде этого

var $result = $('<div />').append(siteHTML); 
$result.find('p.description'); 

JQuery требует структуры дерева, чтобы пройти и выполнять свои операции. Непосредственно пытаться использовать .find() без использования корневого элемента работать не будет. В приведенном выше случае $('<div/>') будет корневым элементом и, добавив результат, jquery будет выше, чтобы пройти его и найти p.description.

Answer 2

Если вы успешно получать HTML и не работает в Access-Control-Allow-Origin вопросы, я испытал ниже, чтобы работать в тестовых случаях:

var description = $(siteHTML).find("p.description").html(); 
console.log(description); 

Если вы можете console.log (siteHTML), и он дает вам выход, тогда вы должны иметь возможность запросить ответ с помощью jQuery, однако могут быть некоторые ограничения, с которыми работают селектора запросов, когда вы не добавляете HTML в DOM.

Answer 3

Если вы делаете «Просмотр кода страницы» для макета страницы вы связаны, вы увидите, что элемент, который вы ищете выглядит следующим образом:

<script type="text/html" id="course-inner-tpl"> 

<div class="row-fluid"> 
    <div class="span6 left-col"> 
    <p class="description"><%- course.get('description') %></p> 
... 

Это означает, что элемент визуализируется в браузере динамически после загрузки. Он не будет частью дерева DOM, когда jQuery анализирует его, так как он находится в теге <script>.

Обратите внимание, что вы также можете найти описание курса на той же странице в статическом теге <meta>, к которому вы должны иметь доступ.

EDIT: Если вам нужна дополнительная информация, вы можете проанализировать соответствующий сценарий, чтобы получить его.Следующий код будет перебирать все сценарии на странице, найти тот, который содержит информацию, извлекать текст, определяющий coursOjb объекта, и разобрать его, как JSON:

$('<div />').append(siteHTML).find('script').each(function(s) { 
    var t = $(this).text(); 
    var p = t.indexOf('window.pageData.courseObj = {'); 
    if(p > 0) { 
     var e = t.indexOf(';', p); 
     var d = JSON.parse(t.substring(p+28, e)); 
     console.log(d.code); 
     console.log(d.name); 
     console.log(d.description); 
     console.log(d.prereqs); 
    } 
});