使用jQuery搜索HTML字符串 [英] Using jQuery to search a string of HTML
问题描述
如果我运行此代码 -
If I run this code -
var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($(html).find('div'));
如果我运行此代码，则无法返回结果 -
I get no results returned, if I run this code -
var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($(html).find('div'));
然后我得到一个结果返回 - 内部div（< div类= 酒吧 >< / DIV> ）。我原本期望第一个代码片段返回一个结果，第二个代码片段返回两个结果。
Then I get a single result returned - the inner div (<div class="bar"></div>). I would have expected the first code snippet to return a single result and the second snippet two results.
同样，此代码不返回任何结果 -
Similarly, this code returns no results -
var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
console.log(code.find('div'));
但此代码警告'div'两次 -
but this code alerts 'div' twice -
var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
alert( this.nodeName );
})
鉴于第二个片段的结果，我原本期望第一个代码片段返回两个结果。有人可以解释为什么我得到了我得到的结果吗？
Given the result of the second snippet, I would have expected the first code snippet to return two results. Could someone please explain why I'm getting the results I'm getting?
http://jsfiddle.net/ipr101/GTCuv/
推荐答案
让我们分开这个问题分为两部分。
Let's split this question into two parts.
首先：
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 ：
do not work because according to the jQuery() docs:
传递复杂的HTML时，某些浏览器可能无法生成完全复制所提供的HTML源的DOM
。如上所述，我们使用
浏览器的.innerHTML属性来解析传递的HTML并将
插入到当前文档中。在此过程中，某些浏览器
过滤掉某些元素，例如< html>，< title>，或< head>
元素。因此，插入的元素可能不是传递的原始字符串的代表
。
When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, we use the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as
<html>,<title>, or<head>elements. As a result, the elements inserted may not be representative of the original string passed.
- 在第一个代码块中，您的
< html>，< head>和< body>代码被剥离，< div class =bar>< / div>仍然存在。find仅在结果<$ c内搜索$ c>< div> ，但找不到任何内容。 - 在第二个代码块中，您的
< html>，< head>，< body>标签被剥离，< div>< div class =bar>< / div>< / div>仍然存在。在结果中搜索搜索，找到一个< div>。 - In the first code block, your
<html>,<head>, and<body>tags are getting stripped out, and<div class="bar"></div>remains.findonly searches inside the resulting<div>, and cannot find anything. - In the second code block, your
<html>,<head>, and<body>tags are getting stripped out, and<div><div class="bar"></div></div>remains.findsearches inside the result, and finds a single<div>.
至于你的第二部分：
var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
console.log(code.find('div'));
首先给jQuery一个字符串，然后用两个<$创建一个jQuery对象C $ C>< DIV> 的。然后，在每个搜索，找不到任何内容并且不返回任何结果。< div> 中搜索
You first give jQuery a string, which it takes and makes into a jQuery object with the two <div>'s. Then, find searches in each <div>, finds nothing and returns no results.
接下来，在
var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
alert( this.nodeName );
})
每个 循环遍历jQuery对象，获取两个创建的< div> 中的每一个，并警告其节点名称。因此，您会收到两个警报。
each loops through the jQuery object, taking each of the two created <div>'s, and alerts their node name. Therefore, you get two alerts.
这篇关于使用jQuery搜索HTML字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
