的jQuery（）沒有找到在jQuery.parseHTML元素（）結果

我正在寫與QUnit測試和使用$.ajax()在HTML中拉了一段從dev的現場測試對我的本地運行：的jQuery（）沒有找到在jQuery.parseHTML元素（）結果

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是#app-container，則不返回任何內容！我想爲div#app-container元素設置一個jQuery對象。

這裏是什麼殺死我：

$.parseHTML(data)確實包含div#app-container元素。這只是$.parseHTML(data)[7]。
然而，$('#app-container', $.parseHTML(data))是一個空數組。
$('div', $.parseHTML(data))包括div#app-container內部的所有div，但不包括div#app-container本身。

這是怎麼回事？看來發生了什麼事情是$沒有看到由$.parseHTML(data)或$($.parseHTML(data)))返回的任何頂級元素，而只是他們的子女。

如何從$.parseHTML(data)獲得jQuery對象div#app-container？

ANSWER

的$(selector, $.parseHTML(data))式的查找使用$.find。因爲我正在尋找這個jQuery對象中最高層的元素，所以我應該使用$.filter。瞧。

來源

2013-03-14 Dmitry Minkovsky

感謝您的更新比下面的答案'filter'漂亮多得到它。儘管這也可以起作用:) – MMachinegun 2014-06-02 15:00:48

您能否提供一個'$ .filter'的示例來獲取'$ .parseHTML'輸出的最外層節點？你如何將parseHTML的輸出傳遞給'$ .filter'？它只接受一個參數。 – Ade 2014-11-20 17:33:17

您需要先創建一個DOM元素，以便首先附加.parseHTML()的結果，以便它c在jQuery可以遍歷它之前創建一個DOM樹並找到div#app-container。

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

我用你的榜樣，並得到它的工作：http://jsfiddle.net/gEYgZ/

的.parseHTML()功能似乎窒息了<script>標籤，所以我不得不將其刪除。

PS。顯然<output>是不是一個真正的HTML標記，只是用它爲例子

來源

2013-03-14 07:56:31 sweetamylase

是的，你說得對。它需要附加在_first_之後，然後進行搜索。在這種情況下，jQuery沒有找到頂級標籤。我想知道爲什麼。 – 2013-03-14 07:59:02

謝謝你的小提琴。我正在考慮製作一個。張貼之前應該做到這一點。 – 2013-03-14 08:00:02

@dimadima這不是關於頂級標籤，'$ .parseHTML（str）'的結果還不是DOM元素。如果你願意的話，它可能處於煉獄狀態，需要被帶入DOM世界。可以通過'.append（）'，'.html（）'等等 – sweetamylase 2013-03-14 08:01:12

我想你應該有這樣嘗試：

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

來源

2013-03-14 07:44:59 Jai

這與我的問題無關。我的問題是'div＃app-container'沒有被jQuery找到。我很感激你的時間，但如果你有更多的時間，請重新閱讀這個問題。 – 2013-03-14 07:47:11

呃...它只是一個建議嘗試這個。 – Jai 2013-03-14 07:51:38

這也是一個空數組。 – 2013-03-14 07:52:37

你可以試試這個：

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

用於與<你可以更短的代碼只是開頭的字符串：

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

來源

2013-03-14 07:53:38 jcubic

嗯，沒錯，但怎麼樣'$（$。parseHTML（ '

hello

'））。找到（' DIV'）'？產生一個空數組。無論如何，'.find（）'方法上面是一樣的'$（ '＃富'，$（$。parseHTML（ '

hello

'）））' – 2013-03-14 07:56:47

@dimadima這對我歸元，我測試了我之前發佈答案。 – jcubic 2013-03-14 07:59:18

是的，它返回'＃foo'，但返回'div'嗎？ – 2013-03-14 08:01:24

恰好碰到了這一點。

原來$.parseHTML回報香草DOM元素Array，而且不支持的jQuery找到你想要的。

我覺得這是一個HTML字符串轉換爲一個jQuery對象的乾淨的解決方案：

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

注意：您可能希望使用在你的HTML字符串$.trim這樣的jQuery沒有得到通過空格迷惑。

來源

2014-09-05 06:50:55 adu

它不會有什麼與HTML不是DOM的一部分。只是出於某種原因，解析的HTML中的頂級標記無法找到。如果您正在查找的元素包裹在另一個標籤中，那麼該查找會按照您的預期工作。順便說一句，包裝在身體標籤元素將無法正常工作，但所有其他人我已經嘗試工作正常。

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

下面是展示小提琴：http://jsfiddle.net/ndnnhf94/

來源

2014-11-20 02:33:46

我相信這會工作，特別是如果你特別需要找到由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; 
}

來源

2015-09-13 22:42:42

的jQuery（）沒有找到在jQuery.parseHTML元素（）結果

回答

相關問題