javascript - jQuery() 在 jQuery.parseHTML() 结果中找不到元素

Question

我正在使用 QUnit 编写测试，并使用$.ajax()在本地运行的开发站点中为一些测试提取 HTML：

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's 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内容#app-container！我想要一个元素的jQuery对象。div#app-container

这就是杀死我的原因：

$.parseHTML(data) 确实包含该div#app-container元素。只是$.parseHTML(data)[7]。
然而，$('#app-container', $.parseHTML(data))是一个空数组。
$('div', $.parseHTML(data))包括中的所有divs div#app-container，但不包括div#app-container其自身。

这里发生了什么？似乎正在发生的事情是没有查看or$返回的任何顶级元素，而只是查看它们的子元素。$.parseHTML(data)$($.parseHTML(data)))

如何从中获取jQuery对象？div#app-container$.parseHTML(data)

回答

$(selector, $.parseHTML(data))-style 查找使用$.find. 因为我正在寻找这个 jQuery 对象中的顶级元素，所以我应该使用它$.filter。瞧。

score 38 · Accepted Answer

您需要创建一个 DOM 元素来附加.parseHTML()first 的结果，以便它在 jQuery 可以遍历它并找到 DOM 树之前创建一个 DOM 树div#app-container。

var tempDom = $('<output>').append($.parseHTML(str));
var appContainer = $('#app-container', tempDom);

我使用了您的示例并使其正常工作：http: //jsfiddle.net/gEYgZ/

该.parseHTML()功能似乎在<script>标签上窒息，所以我不得不删除它们。

PS。显然<output>不是真正的HTML标签，只是用它来举例

score 12 · Accepted Answer

你可以试试这个：

$($.parseHTML('<div><span id="foo">hello</span></div>')).find('#foo');

对于以您开头的字符串，<可以将该代码缩短为：

$('<div><span id="foo">hello</span></div>').find('#foo');

score 4 · Accepted Answer

刚碰到这个。

结果$.parseHTML返回了一个 DOM 元素的 vanilla Array，它不支持您想要的 jQuery 查找。

我认为这是将 HTML 字符串转换为 jQuery 对象的最简洁的解决方案：

var html = '<div><span id="foo">hello</span></div>';
var $foo = $(html).find('#foo');

注意：你可能想$.trim在你的 html 字符串周围使用，这样 jQuery 就不会被空格混淆。

score 3 · Accepted Answer

It doesn't have anything to do with the html not being part of the DOM. It's just that for whatever reason the top level tag(s) in the parsed HTML cannot be found. If the element you are looking for is wrapped in another tag, then the find works as you expect. BTW, wrapping the element in the body tag won't work, but all the others I have tried work fine.

var bad = $.parseHTML('<ul><<li><one/li>/<li>two</li></ul>');
console.log($(bad).find('li').length);  //will be 2
console.log($(bad).find('ul').length);  //will be 0 

var good = $.parseHTML('<div><ul><<li><one/li>/<li>two</li></ul></div>');
console.log($(good).find('li').length); //will be 2
console.log($(good).find('ul').length); //will be 1

This is definitely the case in jQuery 1.11, not sure what happens in later versions. Here is a fiddle that demonstrates: http://jsfiddle.net/ndnnhf94/

score 2 · Accepted Answer

以上答案对我不起作用，这样做：

使用 jQuery.parseHTML 将 HTML 解析为元素数组；然后您就可以将其转换为 jQuery 集合并使用过滤器将集合限制为与选择器匹配的元素。

var html =
'<td class="test">asd</td>' +
'<td class="last">jkl</td>';
var obj = $($.parseHTML(html)).filter('.test');

score 0 · Accepted Answer

0

我认为你应该试试这个：

$('body', $.parseHTML(data))

于 2013-03-14T07:44:59.790 回答

score 0 · Accepted Answer

我相信这会起作用，特别是如果您特别需要通过 id 查找元素；

function findInParsed(html, selector){
    return $(selector, html).get(0) || $(html).filter(selector).get(0);
}

如果您需要对象的 jquery 版本，那么您可以使用它来获取它

function findInParsed(html, selector){
    var check = $(selector, html).get(0);
    if(check)
        return $(check);
    check = $(html).filter(selector).get(0)
    return (check)? $(check) : false;
}

javascript - jQuery() 在 jQuery.parseHTML() 结果中找不到元素

7 回答 7

Related

Reference