ipr*_*101 31 javascript jquery jquery-selectors
如果我运行此代码 -
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 );
})
鉴于第二个片段的结果,我原本期望第一个代码片段返回两个结果.有人可以解释为什么我得到的结果我得到了吗？
Dig*_*ane 38
我们将这个问题分成两部分.
第一:
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()文件:
传递复杂的HTML时,某些浏览器可能无法生成完全复制所提供的HTML源的DOM.如上所述,我们使用浏览器的.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一个字符串,然后把它变成一个带有两个字符串的jQuery对象<div>.然后,find在每个搜索中<div>找不到任何内容并且不返回任何结果.
接下来,在
var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
alert( this.nodeName );
})
each循环遍历jQuery对象,获取两个创建<div>的每个对象,并提醒其节点名称.因此,您会收到两个警报.
vic*_*cky 17
答案很简单.当你使用jQuery(html)创建对象时,它会创建一个节点层次结构,当你找到一个像'div'这样的节点时,它会搜索整个层次结构,除了根元素,在你的第一个例子中,你没有子节点'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'));
小智 6
简单的方法如下：
鉴于字符串：
var html= '<html><head></head><body><div class="bar"></div></body></html>';
使用类栏搜索 div：
$(html).filter('.bar')
或所有 div：
$(html).filter('div')
返回带有类的对象 bar
| 归档时间： |
|
| 查看次数： |
47553 次 |
| 最近记录： |