Я пишу тесты с помощью QUnit и используя $.ajax()
, чтобы вытащить HTML для некоторых тестов из сайта dev, работающего на моем локальном:
add_elements = function(location, selector) {
$.ajax(location, {async: false}).done(function(data) {
stor.$els = $(selector, $.parseHTML(data));
stor.$els.appendTo($('body'));
})
}
Используя эту функцию в определенном месте, я получаю следующий data
, переданный моему обратному сообщению .done()
:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="app-container" class="container-fluid">
<div class="page-header">
<h1>
<a href="/">Home</a>
<small>Text</small>
</h1>
</div>
<div id="hero-units" class="carousel-inner slide">
<div class="hero-unit home item active">
<h1>
Text text text
</h1>
<p>
More text!
</p>
<div id="app-nav">
<a id="lets-go" class="btn btn-primary btn-large nav-forward" href="/what-up/">
Let go
</a>
</div>
</div>
</div>
</div>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/underscore.js"></script>
<script src="/static/js/backbone.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/site-fiddle.js"></script>
<script src="/static/js/site.js"></script>
</body>
</html>
Все работает, если selector
равно #hero-units
или .hero-unit
, но $(selector, $.parseHTML(data))
ничего не возвращает, если selector
is #app-container
! И я хочу объект jQuery
для элемента div#app-container
.
И вот что меня убило:
-
$.parseHTML(data)
содержит элементdiv#app-container
. Это просто$.parseHTML(data)[7]
. - Тем не менее,
$('#app-container', $.parseHTML(data))
- пустой массив. -
$('div', $.parseHTML(data))
содержит всеdiv
внутриdiv#app-container
, но неdiv#app-container
.
Что здесь происходит? Похоже, что происходит то, что $
не смотрит ни на один из элементов верхнего уровня, возвращаемых $.parseHTML(data)
или $($.parseHTML(data)))
, и просто их дочерние элементы.
Как я могу получить объект jQuery
для div#app-container
из этого $.parseHTML(data)
?
ANSWER
Поиск $(selector, $.parseHTML(data))
-style использует $.find
. Поскольку я ищу элемент верхнего уровня в этом объекте jQuery, вместо этого я должен использовать $.filter
. Вуаля.