Question

我一直在使用jQuery，但最近我在使用jQuery的 .html（）方法时遇到了IE7和IE8的问题。我从AJAX调用收到XML响应并尝试获取该响应的特定段的innerHTML，我得到一个未定义的。

现在这完全适用于Firefox，Chrome和IE 9.

请参阅下面的代码：

 var data = 
     "<reponse_data>" + 
     "  <chart_data>" + 
     "      <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78' toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1' bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
     "          <set label='Inventario' value='1203' />" + 
     "          <set label='Recibidas' value='3423' />" + 
     "          <set label='Subastadas' value='3661' />" + 
     "          <set label='Entregadas' value='3648'  />" + 
     "          <set label='Balance' value='978'  />" + 
     "      </chart>" + 
     "  </chart_data>" + 
     "  <misc>" + 
     "      <initialInvCell>1,203</initialInvCell>" + 
     "      <receivedUnitsCell>3,423</receivedUnitsCell>" + 
     "      <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
     "      <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
     "      <finalInventoryCell>978</finalInventoryCell>" + 
     "  </misc>" + 
     "</reponse_data>";

 console.log('ChartData: ' + $(data).find('chart_data').html());

Answer 1

$(data)还不是HTML。它是一个字符串，因此它没有jQuery使用的任何与之关联的DOM。在尝试将其与jQuery一起使用之前，您需要将其转储到DOM中。

因为你从某个地方把它作为一个字符串，所以最好的事情（性能和内存）是解析字符串并获得你想要的值。您可以使用RegEx，或查找开始和结束括号的索引，并获取它们之间的任何内容。

Answer 2

编辑：我已经更新了我的答案。请参阅此jsfiddle以查看其有效...

注意这是使用jquery 1.8.2

HTML：

<div id="maincontent">
    hello world
</div>

JS：

var data = 
 "<reponse_data>" + 
 "  <chart_data>" + 
 "      <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78' toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1' bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
 "          <set label='Inventario' value='1203' />" + 
 "          <set label='Recibidas' value='3423' />" + 
 "          <set label='Subastadas' value='3661' />" + 
 "          <set label='Entregadas' value='3648'  />" + 
 "          <set label='Balance' value='978'  />" + 
 "      </chart>" + 
 "  </chart_data>" + 
 "  <misc>" + 
 "      <initialInvCell>1,203</initialInvCell>" + 
 "      <receivedUnitsCell>3,423</receivedUnitsCell>" + 
 "      <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
 "      <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
 "      <finalInventoryCell>978</finalInventoryCell>" + 
 "  </misc>" + 
"</reponse_data>";

var a = $("<div/>",{
    html: data,
    id: "darth",
    style: "display:none;"
}).appendTo($("#maincontent"));

var b = a.find("chart_data").html();

alert(b);

旧答案：

我不认为这会起作用，因为那时它不是真正的HTML。它是一串文字，直到它注入dom ......

如果你想使用像.html（）这样的方法，我建议先将它转储到dom中。

类似......

var data = "data" + "more data..." + "more data"...


var a = $("<div/>",{html: data, display: "none"}).appendTo($("body"));

...然后

var b = a.find("chart_data").html();

它不是很漂亮，但它应该有用......

Answer 3

你好@teewuane和@joshua，

感谢您的帮助。通过以下方式，我能够成功实现我的目标：

http://jsfiddle.net/CcWfj/3/

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
       function ieParse () {
            //var xmlText = "<root><fruit color='red'></fruit></root>";
            var xmlText = "<reponse_data>" + 
                          "   <chart_data>" + 
                          "       <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78'     toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1'     bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
                          "           <set label='Inventario' value='1203' />" + 
                          "           <set label='Recibidas' value='3423' />" + 
                          "           <set label='Subastadas' value='3661' />" + 
                          "           <set label='Entregadas' value='3648'  />" + 
                          "           <set label='Balance' value='978'  />" + 
                          "       </chart>" + 
                          "   </chart_data>" + 
                          "   <misc>" + 
                          "       <initialInvCell>1,203</initialInvCell>" + 
                          "       <receivedUnitsCell>3,423</receivedUnitsCell>" + 
                          "       <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
                          "       <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
                          "       <finalInventoryCell>978</finalInventoryCell>" + 
                          "   </misc>" + 
                          "</reponse_data>";

            var xmlDocument = XMLFromString(xmlText);
            var chartData = XMLToString(xmlDocument.childNodes[0].childNodes[0].childNodes[0]);
            var elementsData = XMLToString(xmlDocument.childNodes[0].childNodes[1]);

            alert(chartData);
            alert(elementsData);

        }

        function XMLToString(oXML) {
          if (window.ActiveXObject) {
            return oXML.xml;
          } else {
            return (new XMLSerializer()).serializeToString(oXML);
          }
        }

        function XMLFromString(sXML) {
          if (window.ActiveXObject) {
            var oXML = new ActiveXObject("Microsoft.XMLDOM");
            oXML.loadXML(sXML);
            return oXML;
          } else {
            return (new DOMParser()).parseFromString(sXML, "text/xml");
          }
        }


    </script>
</head>
<body>
    <button onclick="ieParse ()">IE Parse</button>
</body>

所以我基本上不得不放弃使用jQuery的.find（）和.html（）函数来共同使用IE7和IE8。

约书亚我会把你的意见提出建议。

我使用了以下参考： http://joncom.be/code/javascript-xml-conversion/

再次感谢，

jQuery.html（）方法在IE7和IE8上无法正常工作

3 个答案: