[经验总结]XSLT输出的HTML空元素导致jQurey解析出错

本文主要是介绍[经验总结]XSLT输出的HTML空元素导致jQurey解析出错,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

*/ -->

Author: Thinkhy
Date: 2010.04.11.
Url: http://www.disandu.com/?p=714
Keyword: HTML空元素 DIV XSLT jQuery

今天有个HTML空元素的问题折腾了我两个小时,问题是这样的,我要处理一段描述结构化文本的HTML片断:

  <div class='paper'> 
<div class='question'>
<div class="subject">To be or not to be, it's a  question?</div>
<div class="choice">A</div>
<div class="choice">B</div>
<div class="choice">C</div>
<div class="choice">D</div>
<div class="aside" />
</div>      

<div class="question" >
<div class="subject">Who am I?</div>
<div class="choice">A</div>
<div class="choice">B</div>
<div class="choice">C</div>
<div class="choice">D</div>
<div class="aside" />
</div>      
</div>

需要取到每一个class名为question的div,逐个进行处理。首先还是用的jQuery方法取:

  $("div.question").each( function() { 
alert($(this).html());
do-something-here ....
}
);

在each方法中将每个元素的html文档取出来,发现div的html内容取得不对,比如取第一个div.question时将之后所有的quesion内容就包括了。于是,我开始逐行删除,缩小出错范围,最后的问题是出在这一行:<div class="aside" />。这时,我隐约记得,HTML标记对空元素的表示不同于XML,有时候就必须要有结束标签。果真是这样,为这行空div加上</div>结束符标签,世界又美好如常了。

从开发者的角度,需要更深入的了解出错原因。仔细一想,这个问题的来源是XSLT模板。上面的HTML内容是经过XSLT模板转换得到的,而在XSLT里output元素的method属性被设置为"xml",这样导致空元素被简写为"<element/>"的形式。让我们再读一段W3C的标准文档(http://www.w3.org/TR/xslt#section-XML-Output-Method):

The html output method should not output an end-tag for empty elements. For HTML 4.0, the empty elements are area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta and param. For example, an element written as <br/> or <br></br> in the stylesheet should be output as <br>.

从上面的标准文档中可以推测,浏览器可能将<div/>处理成<div>,这就会导致上面出现的错误。

问题到这里应该算彻底解决了,但IE却又带来了难题,将XSLT中output method设置为html后,图片不能显示了,原因是图片路径中有汉字,出现了编码不识别的问题,换了好几个中文编码都没成功。最后只得在空div中加了个空格,强制div元素非空。

今天的经历告诉我们,要勤读标准文档,不要相信MS。

这篇关于[经验总结]XSLT输出的HTML空元素导致jQurey解析出错的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/862884

相关文章

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

C语言中自动与强制转换全解析

《C语言中自动与强制转换全解析》在编写C程序时,类型转换是确保数据正确性和一致性的关键环节,无论是隐式转换还是显式转换,都各有特点和应用场景,本文将详细探讨C语言中的类型转换机制,帮助您更好地理解并在... 目录类型转换的重要性自动类型转换(隐式转换)强制类型转换(显式转换)常见错误与注意事项总结与建议类型

MySQL 缓存机制与架构解析(最新推荐)

《MySQL缓存机制与架构解析(最新推荐)》本文详细介绍了MySQL的缓存机制和整体架构,包括一级缓存(InnoDBBufferPool)和二级缓存(QueryCache),文章还探讨了SQL... 目录一、mysql缓存机制概述二、MySQL整体架构三、SQL查询执行全流程四、MySQL 8.0为何移除查

在Rust中要用Struct和Enum组织数据的原因解析

《在Rust中要用Struct和Enum组织数据的原因解析》在Rust中,Struct和Enum是组织数据的核心工具,Struct用于将相关字段封装为单一实体,便于管理和扩展,Enum用于明确定义所有... 目录为什么在Rust中要用Struct和Enum组织数据?一、使用struct组织数据:将相关字段绑

使用Java实现一个解析CURL脚本小工具

《使用Java实现一个解析CURL脚本小工具》文章介绍了如何使用Java实现一个解析CURL脚本的工具,该工具可以将CURL脚本中的Header解析为KVMap结构,获取URL路径、请求类型,解析UR... 目录使用示例实现原理具体实现CurlParserUtilCurlEntityICurlHandler