使用jQuery如果我運行此代碼搜索HTML

的字符串 -使用jQuery如果我運行此代碼搜索HTML

var html= '<html><head></head><body><div class="bar"></div></body></html>'; 
console.log($(html).find('div'));

我沒有得到任何結果返回，如果我運行這段代碼 -

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; 
console.log($(html).find('div'));

然後我得到的返回一個結果 - 內部div（<div class="bar"></div>）。我會期望第一個代碼片段返回一個結果，第二個片斷返回兩個結果。

同樣，這個代碼不返回任何結果 -

var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); 
console.log(code.find('div'));

但是這個代碼警報「DIV」兩次 -

var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); 
code.each(function() { 
    alert(this.nodeName); 
})

鑑於第二片斷的結果，我本來期望第一碼片段返回兩個結果。有人能解釋爲什麼我會得到我得到的結果嗎？

http://jsfiddle.net/ipr101/GTCuv/

來源

2011-08-23 ipr101

我改變了'console.log'到'alert'，並驚動了'[對象的對象]'，所以它一定是發現了什麼...... –

@Eran齊默爾曼：這是因爲jQuery總是返回一個對象，而不管爲選擇器找到多少匹配。 –

我假設[object Object]是指jQuery返回的空數組。 – ipr101

讓我們把這個問題分成兩部分。

第一：

var html= '<html><head></head><body><div class="bar"></div></body></html>'; 
console.log($(html).find('div'));

和

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; 
console.log($(html).find('div'));

不要因爲根據jQuery() docs工作：

當通過在複雜的HTML，某些瀏覽器可能不會產生一個DOM 這完全複製了所提供的HTML源代碼。如上所述，我們使用瀏覽器的.innerHTML屬性來解析傳遞的HTML並將插入到當前文檔中。在此過程中，某些瀏覽器會過濾掉某些元素，如<html>,<title>或<head> 元素。因此，插入的元素可能不是傳遞原始字符串的代表。

在第一個代碼塊，你<html>，<head>，並<body>標籤越來越剝離出來，並<div class="bar"></div>遺體。 find只在搜索結果<div>內搜索，並找不到任何內容。
在第二個代碼塊中，您的<html>,<head>和<body>標籤被剝離出來，並且仍保留<div><div class="bar"></div></div>。 find搜索結果中，並找到一個單一的<div>。

至於你的第二個部分：

var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); 
console.log(code.find('div'));

你先放棄jQuery的一個字符串，它需要和讓與兩個<div>的一個jQuery對象。然後，在每個<div>中搜索find，發現任何內容並且不返回任何結果。

接着，在

var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); 
code.each(function() { 
    alert(this.nodeName); 
})

each循環通過jQuery對象，服用，每次兩個創建<div>的，並且提醒其節點名稱。因此，你會得到兩個警報。

來源

2011-08-23 10:20:15

在第三示例.find，搜索在每一個匹配元素的孩子。在你的div裏面沒有div孩子（他們沒有孩子），所以.find(anything)不會返回任何元素。另一方面，對集合中的當前元素進行迭代，其中包括div s（存在兩個匹配元素 - div s）。這些元素包含div（有兩個匹配元素 - div s）。

至於你的第一個例子中的<html>，我不確定 - 也許你不允許在頁面加載後創建第二個<html>元素。 $('<html><head></head><body><div class="bar"></div></body></html>');只返回div，所以.find不返回任何內容。

來源

2011-08-23 10:19:07 pimvdb

jQuery（或者更準確地說，瀏覽器）刪除'html'，'head'和'body'標籤，只保留'body'內容。 –

@Felix Kling：謝謝，很高興知道。這可能令人沮喪。 – pimvdb

答案很簡單。當你使用jQuery（html）創建對象時，它會創建一個節點層次結構，並且當您找到像'div'這樣的節點時，它會搜索除根元素以外的整個層次結構，並且在第一個示例中，您沒有child'div'節點。而在第二個例子中，你只有一個孩子'div'節點。

因此，如果您在整個層次結構中保留一個額外的根節點，那麼您可以輕鬆找到所有節點。像

var html= '<html><head></head><body><div class="bar"></div></body></html>'; 
console.log($('<div></div>').append(html).find('div')); 

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; 
console.log($('<div></div>').append(html).find('div'));

來源

2011-08-23 12:01:01 vicky

這是應該如何完成的。如果有超過1個根元素，則接受的答案將不起作用。 – ProblemsOfSumit

最簡單的方法如下：

給出字符串：

var html= '<html><head></head><body><div class="bar"></div></body></html>';

搜索與類欄格：

$(html).filter('.bar')

或者所有div：

$(html).filter('div')

返回對象與類bar

來源

2017-01-12 19:11:30 Jeff

太棒了！你拯救我的一天！ –

回答

相關問題