[Experience Summary] jqurey parsing error caused by HTML null elements output by XSLT

*/
-->

Author:	Thinkhy
Date:	2010.04.11.
URL:	Http://www.disandu.com /? P = 714
Keyword:	HTML empty element Div XSLT jquery

Today, I had a problem with HTML empty elements for two hours. The problem is that I want to process an HTML segment that describes structured text:

  ＜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>

You need to obtain the DIV of each class named question and process them one by one. First, use the jquery method:

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

In the each method, obtain the HTML document of each element and find that the HTML content of the DIV is incorrect. For example, when getting the first Div. Question, all the subsequent quesion content will be included. As a result, I began to delete the file row by row to narrow down the error scope. The final problem was this line: <Div class = "aside"/>. At this time, I vaguely remember that HTML tags are different from XML in the representation of empty elements, and sometimes there must be an end tag. If this is the case, add the </div> Terminator label to the empty Div line, and the world looks as usual.

From the developer's point of view, you need to have a deeper understanding of the cause of the error. The source of this problem is the XSLT template. The preceding HTML content is converted from an XSLT template, and the method attribute of the output element in XSLT is set to "XML ", this causes empty elements to be abbreviated as "<element/>. Let's read a W3C standard document (http://www.w3.org/TR/xslt#section-XML-Output-Method ):

The HTML output method shocould 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 shocould be output as <br>.

It can be inferred from the above standard document that the browser may process <DIV/> into <div>, which will cause the above error.

The problem should be completely solved here, But IE has brought about another problem. After the output method in XSLT is set to HTML, the image cannot be displayed because there are Chinese characters in the image path, there was a problem where the encoding was not recognized, and I failed to change several Chinese encoding methods. At last, we had to add a space in the empty Div to force the DIV element to be non-empty.

Today's experience tells us that we should read standard documents frequently and never trust Ms.