我现在需要用 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>
</html>
1
starvedcat OP 就是先 parseHTML ,然后 find id 为 myclass 的元素(就是那个<h1>),但是为什么提示 undefined 呢?
|
2
murmur 2016-10-17 08:25:22 +08:00
有问题么 整个代码里没看到 title 元素 当然是 undefined 了
就算是也是$("title") 只有 document 用的不是引号的 |
3
FelixXie 2016-10-17 08:25:29 +08:00
$(document)?
|
4
LimboRunner 2016-10-17 08:34:16 +08:00
doc 就是 #myclass
|
5
finian 2016-10-17 08:35:55 +08:00
调试一下不就知道了么
|
6
cismous 2016-10-17 08:40:54 +08:00 1
id="myclass" 外面再包裹一层 div
|
7
starvedcat OP @cismous …………………………………………谢谢!可是,这是为什么,是不是没有<div>就找不到了??
|
8
starvedcat OP 感谢 cismous 的回复,把上面代码<h1>外面再加一层<div>之后这段代码就可以正常 alert 出 title 了。所以现在我又有新的疑问了:这是为什么??
|
9
iyangyuan 2016-10-17 08:47:40 +08:00 via iPhone 3
原因是 jquery 从 body 的直接子元素开始解析,所以 h1 是顶级节点,自己 find 自己,当然 find 不到
|
10
murmur 2016-10-17 08:52:37 +08:00 1
@starvedcat 因为 parse 后的结果就是<h1 id="myclass">content</h1>
其余的标签被去掉了 |
11
murmur 2016-10-17 08:56:12 +08:00
@iyangyuan 这句话求出处,官方文档我刚才查了他是调用的"native method"去做的解析,所以跟 jq 无关,问题出在 parse 那句,单独用 jquery 操作 body html header 里的东西都是没问题的
|
12
zeusLeeJh 2016-10-17 08:56:19 +08:00
打印一下 str 的值在 parse 后的变化嘛。你会发现只有 h1 标签,那么你怎么 find 出来呢
|
13
loading 2016-10-17 08:58:35 +08:00 via Android 1
楼主可以看看 alert($(doc).html)
|
14
starvedcat OP |
15
maijiawei 2016-10-17 09:12:03 +08:00 1
console.log($(str).find('#myclass').html());
|
16
kingze1992 2016-10-17 09:13:55 +08:00 1
我建议楼主先把 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 的元素,当然找不到。 再次建议:找本书把基础学一学。 |
17
FrankFang128 2016-10-17 09:14:09 +08:00
parseHTML 用错了
|
18
liuyanjun0826 2016-10-17 09:17:26 +08:00
<!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> |
19
kingze1992 2016-10-17 09:18:09 +08:00
还有,如果自己练习的时候,需要引用库文件,比如 jquery.min.js , jquery.js ,建议从官网上下载下来,然后在本地引用,不然每次打开浏览器调试的时候,都要多等几秒钟(可能是我网络不好),不着急吗?
|
20
zhenjiachen 2016-10-17 09:53:17 +08:00
`
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()); ` |
21
murmur 2016-10-17 10:10:09 +08:00
@kingze1992 这我感觉反倒是个好习惯,对于 jquery 这种超大众库以后肯定是蹭 cdn 的,哪里有用自己流量刷静态资源的
|
22
kingze1992 2016-10-17 10:13:31 +08:00
@murmur 自己平时练习没必要用 cdn 吧?我打开的时候要等三秒左右加载,影响个人心情。
|
23
tonghuashuai 2016-10-17 10:28:30 +08:00
<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')。 |
24
quxiangxuanqxx 2016-10-17 10:43:15 +08:00
@murmur 开发环境和生产环境不一样啊,这并不是一个好习惯。
|
25
murmur 2016-10-17 10:47:15 +08:00
@quxiangxuanqxx
开发系统和生产环境当然越接近越好 最多域名、硬件配置不一样 以前是一个网站全相对资源,现在是几乎所有的东西都在别的服务器上,图片有图床,静态有 cdn ,数据源有一些服务器,然后一个登录还要给所有的域名上 cookie ,如果开发的时候图省事全放一个服务器上,等真拆分了有些本来早就应该发现的问题就暴露出来了 其实很多大的类库都有在线的 cdn 地址给你用 |
26
quxiangxuanqxx 2016-10-17 10:53:43 +08:00
@murmur 配置一下呀,上线自动切换成生产环境, dev 环境是可以设置的。这是比较基础的知识吧
|
27
starvedcat OP @kingze1992 谢谢,我在本地的确是下载下来调试的,发到 V2EX 上的时候改成 CDN 了。。。。:)
|