为什么这段 js 出不了我想要的结果呢？

2016-10-17 08:17:19 +08:00
 starvedcat

我现在需要用 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>
3470 次点击
所在节点    JavaScript
27 条回复
starvedcat
2016-10-17 08:19:49 +08:00
就是先 parseHTML ，然后 find id 为 myclass 的元素（就是那个<h1>），但是为什么提示 undefined 呢？
murmur
2016-10-17 08:25:22 +08:00
有问题么 整个代码里没看到 title 元素 当然是 undefined 了
就算是也是$("title") 只有 document 用的不是引号的
FelixXie
2016-10-17 08:25:29 +08:00
$(document)？
LimboRunner
2016-10-17 08:34:16 +08:00
doc 就是 #myclass
finian
2016-10-17 08:35:55 +08:00
调试一下不就知道了么
cismous
2016-10-17 08:40:54 +08:00
id="myclass" 外面再包裹一层 div
starvedcat
2016-10-17 08:43:16 +08:00
@cismous …………………………………………谢谢！可是，这是为什么，是不是没有<div>就找不到了？？
starvedcat
2016-10-17 08:46:09 +08:00
感谢 cismous 的回复，把上面代码<h1>外面再加一层<div>之后这段代码就可以正常 alert 出 title 了。所以现在我又有新的疑问了：这是为什么？？
iyangyuan
2016-10-17 08:47:40 +08:00
原因是 jquery 从 body 的直接子元素开始解析，所以 h1 是顶级节点，自己 find 自己，当然 find 不到
murmur
2016-10-17 08:52:37 +08:00
@starvedcat 因为 parse 后的结果就是<h1 id="myclass">content</h1>
其余的标签被去掉了
murmur
2016-10-17 08:56:12 +08:00
@iyangyuan 这句话求出处，官方文档我刚才查了他是调用的"native method"去做的解析，所以跟 jq 无关，问题出在 parse 那句，单独用 jquery 操作 body html header 里的东西都是没问题的
zeusLeeJh
2016-10-17 08:56:19 +08:00
打印一下 str 的值在 parse 后的变化嘛。你会发现只有 h1 标签，那么你怎么 find 出来呢
loading
2016-10-17 08:58:35 +08:00
楼主可以看看 alert($(doc).html)
starvedcat
2016-10-17 09:02:18 +08:00
http://stackoverflow.com/questions/4429851/parse-complete-html-page-with-jquery
maijiawei
2016-10-17 09:12:03 +08:00
console.log($(str).find('#myclass').html());
kingze1992
2016-10-17 09:13:55 +08:00
我建议楼主先把 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 的元素，当然找不到。

再次建议：找本书把基础学一学。
FrankFang128
2016-10-17 09:14:09 +08:00
parseHTML 用错了
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>
kingze1992
2016-10-17 09:18:09 +08:00
还有，如果自己练习的时候，需要引用库文件，比如 jquery.min.js ， jquery.js ，建议从官网上下载下来，然后在本地引用，不然每次打开浏览器调试的时候，都要多等几秒钟（可能是我网络不好），不着急吗？
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());
`

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/313222

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX