› Closure: The Definitive Guide
我现在需要用 js 处理一段以字符串形式输入的 html 。我发现下面这段程序无法打印出我要的结果，研究了好久实在看不出哪里有问题，特来求助！
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script>
var str = '<html><head></head><body><h1 id="myclass">content</h1></body></html>';
var doc = $.parseHTML(str);
var title = $(doc).find('#myclass');
alert($(title).html());
</script>
</body>
</html>
 |
1
就是先 parseHTML ，然后 find id 为 myclass 的元素（就是那个<h1>），但是为什么提示 undefined 呢？
|
 |
murmurOct 17, 2016
2
有问题么 整个代码里没看到 title 元素 当然是 undefined 了
就算是也是$("title") 只有 document 用的不是引号的 |
 |
FelixXieOct 17, 2016
3
$(document)？
|
 |
LimboRunnerOct 17, 2016
4
doc 就是 #myclass
|
 |
finianOct 17, 2016
5
调试一下不就知道了么
|
 |
6
id="myclass" 外面再包裹一层 div
|
|
7
@cismous …………………………………………谢谢！可是，这是为什么，是不是没有<div>就找不到了？？
|
|
8
感谢 cismous 的回复，把上面代码<h1>外面再加一层<div>之后这段代码就可以正常 alert 出 title 了。所以现在我又有新的疑问了：这是为什么？？
|
 |
9
原因是 jquery 从 body 的直接子元素开始解析，所以 h1 是顶级节点，自己 find 自己，当然 find 不到
|
|
10
@starvedcat 因为 parse 后的结果就是<h1 id="myclass">content</h1>
其余的标签被去掉了 |
|
murmurOct 17, 2016
11
@iyangyuan 这句话求出处，官方文档我刚才查了他是调用的"native method"去做的解析，所以跟 jq 无关，问题出在 parse 那句，单独用 jquery 操作 body html header 里的东西都是没问题的
|
 |
zeusLeeJhOct 17, 2016
12
打印一下 str 的值在 parse 后的变化嘛。你会发现只有 h1 标签，那么你怎么 find 出来呢
|
 |
13
楼主可以看看 alert($(doc).html)
|
|
14
|
 |
15
console.log($(str).find('#myclass').html());
|
 |
16
我建议楼主先把 html 基础和 jQuery 基础看一看吧。
第一，调试的时候，你先用 console.log()把变量输出到控制台看一看，比如这个例子里 console.log(title)的结果为 []， console.log(doc)的结果才是 h1 元素。 第二， jQuery 的 find(selector): Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element. 其中 descendant 的意思是 后代，子孙，你在 h1#myclass 元素里，用.find()查找后代中 id 为 myclass 的元素，当然找不到。 再次建议：找本书把基础学一学。 |
 |
FrankFang128Oct 17, 2016
17
parseHTML 用错了
|
 |
liuyanjun0826Oct 17, 2016
18
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>ppi</title> </head> <body> <script> function ppicomputing() { var height = document.getElementById('height').value; var width = document.getElementById('width').value; var diagonal = document.getElementById('diagonal').value; var ppi= (Math.sqrt(height * height + width * width)) / diagonal; var ppivalue = document.getElementById('ppivalue'); document.getElementById("ppivalue").value = ppi.toString().substr(0,4); } </script> height<br> <input type="text" id="height">height<br> width<br> <input type="text" id="width">width<br> diagonal<br> <input type="text" id="diagonal">diagonal<br> ppi<br> <input type="text" id="ppivalue"><br> <button onclick="ppicomputing()">computing</button> </body> </html> |
|
kingze1992Oct 17, 2016
19
还有，如果自己练习的时候，需要引用库文件，比如 jquery.min.js ， jquery.js ，建议从官网上下载下来，然后在本地引用，不然每次打开浏览器调试的时候，都要多等几秒钟（可能是我网络不好），不着急吗？
|
 |
zhenjiachenOct 17, 2016
20
`
var str = '<html><head></head><body><h1 id="myclass">content</h1></body></html>'; var doc = $.parseHTML(str); var $title = $(doc).find('#myclass'); alert($title.html()); ` |
|
murmurOct 17, 2016
21
@kingze1992 这我感觉反倒是个好习惯，对于 jquery 这种超大众库以后肯定是蹭 cdn 的，哪里有用自己流量刷静态资源的
|
|
kingze1992Oct 17, 2016
22
@murmur 自己平时练习没必要用 cdn 吧？我打开的时候要等三秒左右加载，影响个人心情。
|
 |
tonghuashuaiOct 17, 2016
23
<html>
<head> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <script> var str = '<html><head></head><body><h1 id="myclass">content</h1></body></html>'; var doc = $.parseHTML(str); var title = doc.find('#myclass'); alert(title.html()); </script> </body> </html> 看第 9 、 10 行， doc 和 title 已经是变量（看前面的 var ），直接用就可以，$(doc) 这种用法感觉你 jQuery 用混乱了，建议先写原生 js ，明白其中的原理以后再用框架。 现在大量使用 jQuery ，导致很多新手只知道 $('#id') 而不知道 document.getElementById('id')。 |
 |
quxiangxuanqxxOct 17, 2016
24
@murmur 开发环境和生产环境不一样啊，这并不是一个好习惯。
|
|
murmurOct 17, 2016
25
@quxiangxuanqxx
开发系统和生产环境当然越接近越好 最多域名、硬件配置不一样 以前是一个网站全相对资源，现在是几乎所有的东西都在别的服务器上，图片有图床，静态有 cdn ，数据源有一些服务器，然后一个登录还要给所有的域名上 cookie ，如果开发的时候图省事全放一个服务器上，等真拆分了有些本来早就应该发现的问题就暴露出来了 其实很多大的类库都有在线的 cdn 地址给你用 |
|
quxiangxuanqxxOct 17, 2016
26
@murmur 配置一下呀，上线自动切换成生产环境， dev 环境是可以设置的。这是比较基础的知识吧
|
|
27
@kingze1992 谢谢，我在本地的确是下载下来调试的，发到 V2EX 上的时候改成 CDN 了。。。。:)
|
1
Select Language