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))包含div内的所有div#app-container，但不包括div#app-container本身。

这里发生了什么？看来发生的事情是$没有查看$.parseHTML(data)或$($.parseHTML(data)))返回的任何顶级元素，而只关注他们的孩子。

如何从此jQuery获取div#app-container的{{1}}个对象？

的 ANSWER 的

$.parseHTML(data) - 样式查找使用$(selector, $.parseHTML(data))。由于我正在寻找这个jQuery对象中顶级元素，我应该使用$.find代替。瞧。

Answer 1

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

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

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

.parseHTML()功能似乎会阻塞<script>标签，因此我不得不将其删除。

PS。显然<output>不是真正的HTML标记，只是将它用于示例

Answer 2

你可以试试这个：

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

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

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

Answer 3

刚碰到这个。

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

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

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

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

Answer 4

它与没有成为DOM的一部分的html没有任何关系。无论出于何种原因，无法找到解析后的HTML中的顶级标记。如果您要查找的元素包含在另一个标记中，则查找将按预期工作。顺便说一句，将元素包裹在body标签中不会起作用，但我尝试过的所有其他元素都能正常工作。

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

这绝对是jQuery 1.11中的情况，不确定在以后的版本中会发生什么。这是一个小提琴演示：http://jsfiddle.net/ndnnhf94/

Answer 5

我认为你应该尝试这个：

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

Answer 6

我相信这会有效，特别是如果您特别需要通过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;
}

Answer 7

以上答案对我不起作用，但确实如此：

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

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

jQuery（）没有在jQuery.parseHTML（）结果中查找元素

7 个答案: