[经验总结]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。