V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
starvedcat
V2EX  ›  JavaScript

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

  •  
  •   starvedcat · 2016-10-17 08:17:19 +08:00 · 3575 次点击
    这是一个创建于 2944 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    再次建议:找本书把基础学一学。
    FrankFang128
        17
    FrankFang128  
       2016-10-17 09:14:09 +08:00
    parseHTML 用错了
    liuyanjun0826
        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>
    kingze1992
        19
    kingze1992  
       2016-10-17 09:18:09 +08:00
    还有,如果自己练习的时候,需要引用库文件,比如 jquery.min.js , jquery.js ,建议从官网上下载下来,然后在本地引用,不然每次打开浏览器调试的时候,都要多等几秒钟(可能是我网络不好),不着急吗?
    zhenjiachen
        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());
    `
    murmur
        21
    murmur  
       2016-10-17 10:10:09 +08:00
    @kingze1992 这我感觉反倒是个好习惯,对于 jquery 这种超大众库以后肯定是蹭 cdn 的,哪里有用自己流量刷静态资源的
    kingze1992
        22
    kingze1992  
       2016-10-17 10:13:31 +08:00
    @murmur 自己平时练习没必要用 cdn 吧?我打开的时候要等三秒左右加载,影响个人心情。
    tonghuashuai
        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')。
    quxiangxuanqxx
        24
    quxiangxuanqxx  
       2016-10-17 10:43:15 +08:00
    @murmur 开发环境和生产环境不一样啊,这并不是一个好习惯。
    murmur
        25
    murmur  
       2016-10-17 10:47:15 +08:00
    @quxiangxuanqxx
    开发系统和生产环境当然越接近越好 最多域名、硬件配置不一样
    以前是一个网站全相对资源,现在是几乎所有的东西都在别的服务器上,图片有图床,静态有 cdn ,数据源有一些服务器,然后一个登录还要给所有的域名上 cookie ,如果开发的时候图省事全放一个服务器上,等真拆分了有些本来早就应该发现的问题就暴露出来了
    其实很多大的类库都有在线的 cdn 地址给你用
    quxiangxuanqxx
        26
    quxiangxuanqxx  
       2016-10-17 10:53:43 +08:00
    @murmur 配置一下呀,上线自动切换成生产环境, dev 环境是可以设置的。这是比较基础的知识吧
    starvedcat
        27
    starvedcat  
    OP
       2016-10-17 11:35:39 +08:00
    @kingze1992 谢谢,我在本地的确是下载下来调试的,发到 V2EX 上的时候改成 CDN 了。。。。:)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1355 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 17:44 · PVG 01:44 · LAX 09:44 · JFK 12:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.