jQuery 解析原始 HTML,以及 Firefox 上的 hasOwnProperty

2023-12-30

我使用加载一些 HTML$.get or $.ajax。在 Chrome 和 Firefox 的调试器中,我可以看到 html 已正确加载:

> 数据

"<html><head><title></title></head><body>
<div id="topdiv" style="display:none;width:880px; height:600px;"></div>
</body</html>"

所以它是一个 HTML 字符串。伟大的。接下来我尝试使用 jQuery 来解析它:

$doc = $(data);

> $文档

[<TextNode textContent="\n\n">, 
title, 
<TextNode textContent="\n\n\n">, 
div#topdiv, 
<TextNode textContent="\n \n">]

哇啊,什么?哪里html, head, body去?好吧,无论如何,我只关心 div

$div = $data.find('div');

> $div

[]

Huh??

好的。 div 是空的。经过进一步的实验,我意识到 jQuery 基本上忽略了任何顶级标签。那么它实际上并不让您选择任何二级标签,因此如果有一个 div 嵌套在外部 div 内,那么它将被选择。但是...什么?

看起来 jQuery 对那些“TextNode”元素有点窒息,奇怪的是,它创建了自己(而不是 html、body)。因此,我编写了一些代码来通过循环元素并直接提取非文本节点来解决这个问题:

function getNodes($doc) {
    var result = new Array();
    for (var i = 0; i < $doc.length; i++) {
        if ($doc[i].hasOwnProperty("tagName")) {
            result.push($doc[i]);
        }
    }
    return $(result);
}

效果很好!在 Chrome 上。

在 Firefox 中尝试过,但没有任何效果。

事实证明,并非 Firefox 中的每个对象都有hasOwnProperty功能。什么??好的。所以重写为:

typeof($tempHtml[i].tagName) !== 'undefined'

最后,它也适用于 Firefox。

哇。我只是愚蠢吗?为什么仅仅将 HTML 字符串转换为 jQuery 对象就需要如此多的后处理?我觉得我一定错过了一些明显的东西。有没有一种方法可以做到这一点而不涉及这种混乱?

我想做的就是加载一些 HTML 并将其转换为 jQuery 对象。然而,这似乎是一个越来越令人困惑的考验。我只是做了一些根本性错误的事情吗?为什么这么复杂?


阅读jQuery 文档 http://api.jquery.com/jQuery/#jQuery2- 它解决了这个问题。

当您有一个包含以下内容的 HTML 字符串时<html>, <head>, or <body>元素,然后你这样做:

$(str)

那么这些元素将被忽略。只有可以放入 DIV 内的元素才是有效的,并且会被添加到生成的 jQuery 实例对象中。


$div = $data.find('div');

这将导致一个空的 jQuery 对象,因为 find() 搜索当前元素集的后代(在您的情况下是一个 TITLE 元素和一个 DIV 元素 - 并且这两个元素没有后代 DIV 元素)。


为了从 jQuery 对象中删除 Text Node 对象,我推荐这种方法:

$data.filter(function() { return this.nodeType === 1; });

要获取 DIV 元素,我推荐以下方法:

$('<div>').html(str).find('div');

where str是你的 HTML 字符串。


替代方法:

$(str).filter('div');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery 解析原始 HTML,以及 Firefox 上的 hasOwnProperty 的相关文章

  • 使用相同图像映射的多个图像 - 如何在单击时返回正确的图像参考?

    我在一个页面上有多个图像 所有图像都使用相同的图像映射 我需要知道用户点击了哪个图像 问题是 this 返回对的引用 area 而不是 img 这是代码 img src image png img src image png img src
  • Jquery可排序“更改”事件元素位置

    有没有办法让助手的当前位置被拖到新位置上 sortable sortable start function event ui var currPos1 ui item index change function event ui var c
  • 在我的 div 标签中 有很多行非常长的文本 并且 div 元素当前是可滚动的 我想做的是找到特定字符串的第一次出现并自动滚动到包含该字符串的行 没有换行符或任何类型的字符串分隔符可以用来轻松近似滚动位置 我想我可以做这样的事情 var m
  • 无法从本地文件夹运行 Jquery

    你好 我是网络开发新手 我需要与JQuery 即使我已经成功尝试过一个jquery但仅在将文件复制到我的在线 ftp 文件夹后 我完全无法从本地文件夹运行它 请解释一下 如何我可以测试一些新脚本吗 进行额外的练习将文件复制到 ftp 文件夹
  • jQuery 和 AngularJS:将事件绑定到更改的 DOM

    在 AngularJS 的 DOM 中 我在 ng repeat 指令中使用 ng include 它加载 HTML 一切正常 不管怎样 我遇到的一个问题是 我使用 JQuery 最新版本 在 DOM 中的元素上绑定一些鼠标悬停和鼠标单击事
  • 在移动浏览器或 PhoneGap 应用程序之间进行检测

    是否可以使用 JavaScript 检测用户是否通过浏览器或应用程序进行访问 我正在通过网页和 PhoneGap 应用程序开发适用于多个移动操作系统的混合应用程序 目标是 独立于部署目标使用相同的代码 仅当用户代理是应用程序时添加 Phon
  • 如何使用 datatables.js 应用条件格式?

    我有一个使用 datatables js 的 html 表 但无法找到如何应用条件格式的清晰示例 当第 4 列中的单元格的值 0 并且第 5 列中的值为 0 时 如何更改该单元格的文本颜色
  • 在选择下拉列表中选择特定选项时添加输入框

    我需要在选择选项时将输入添加到选择选项中 每当用户选择 其他 时 就会出现一个输入框供用户输入数据 HTML
  • JQuery 网络摄像头插件 - 无需 PHP 即可保存图像

    我正在使用 JQuery 网络摄像头插件 这是主页 http www xarg org project jquery webcam plugin 它看起来非常有用 但我的问题是我不知道如何使用asp net 不使用php 保存图像 有人有什
  • 显示对象内容 - JS/jQuery

    With this data events 返回 object Object 我需要看看里面到底发生了什么 我找到了这个 var Finder each this data events function i n Finder Name i
  • Ajax 刷新后的事件监听器

    我的网站上有一个结帐部分 我在数量部分运行此事件侦听器 以便每次根据单击的产品更新数量时 整个 div 都会使用 AJAX 重新加载 因此所有价格 总金额也会刷新 该代码可以工作一次 但之后该功能就不再工作了 cart product qu
  • 如何使用 jquery 验证这种格式 (yyyy-mm-dd) 的日期?

    我正在尝试验证以下格式的日期 yyyy mm dd 我找到了这个解决方案 但它的格式不符合我的需要 如 mm dd yyyy 这是该解决方案的链接 http jsfiddle net ravi1989 EywSP 848 http jsfi
  • 如何使用 jQuery 获取点击元素的 id

    div class main div div span class get clicked click to get id span div div 如何获取被点击元素的id inside div 中存在的跨度将具有不同的 id 因为我将使
  • 解决错误 413 请求实体太大

    我正在从事的项目允许我们的员工将大文件上传到我们的共享主机并获取下载链接 问题是我们的托管拒绝更改共享托管的 LimitRequestBody 还有其他解决方案可以解决 LimitRequestBody 或任何其他方法来完成这项工作吗 有两
  • jquery(或纯js)模拟按下回车键进行测试

    模拟用户按 enter 键的最佳方法是什么 element keypress 似乎不允许我传递按下的实际键 这是用于单元测试的 演示在这里 http jsfiddle net 3xTM2 var e jQuery Event keypres
  • 如何通过 jQuery 加载部分视图?

    我正在尝试使用 jQuery 加载部分视图 正在从 Contact cshtml 加载部分视图 然而 在 Chrome 中 当我尝试加载partialViewName cshtml 时 我不断收到 404 错误 我有以下文件夹结构 View
  • Rails3-jquery-autocomplete 如果没有可用数据则清除字段

    我正在使用rails3 jquery autocomplete 如果自动完成没有返回结果 是否可以清除自动完成字段的值 我试图阻止用户提交数据库中没有的值 我使用的是旧版本 但我实现了change处理程序autocomplete call
  • 在 GeoJson 数据接收到的 Google 地图多边形上放置标签

    我想将带有信息的标签 或带有标签的 div 放在由下面的代码片段绘制的多边形上 样式属性已成功应用于要素 多边形类型 有谁知道如何向该特征添加文本并将其显示在多边形的中心 function handleGeoJson data map da
  • 垂直滚动,与 div/元素/锚点对齐/对齐

    我发现了一些可爱的网站 http www mini jp event campaign big point http www mini jp event campaign big point http www twenty8twelve c
  • 基于 ajax 的弹出窗口中的 Mathjax + CKEditor 4 + CKEditor

    我已经配置了 CKEditor 4 并且我的页面上有以下内容 我的页面中有一个 CKEditor 设置值的两个选项 这两个选项本身分别选项两个基于 ajax 的弹出窗口 这些基于 ajax 的弹出窗口包含 CKEditor 现在我有以下问题

随机推荐