解析 XML Ajax，出现在 html 之后的数据

Question

我正在使用下面的代码从 AJAX 获取请求中解析 xml，为什么所有元素都出现在 html 之后？我做错了什么？

<li><section><blockquote><p></p></blockquote></section></li>
<h1>QUOTE</h1>
<img class="truffle" src="Content/Images/truffles/pecan-caramel-truffle.png?text=pecan-caramel-truffle">
<h2>NAME</h2>

AJAX 解析

$(result).find('ContestResult').each(function () {
   var name = $(this).find('FirstName').text();
   var imgName = $(this).find('ImageName').text();
   var quote = $(this).find('quote').text();
   var theName = "NAME";

   var sliderItem = '<li><section><blockquote><p>' + quote + '</p></li></blockquote>';
   sliderItem += '<h1>~' + name + '</h1></section>';
   sliderItem += '<img class="yep" src="' + imgName + '" />';
   sliderItem += '<h2>' + theName + '</h2>';
   sliderItem += '</li>';

   $("ul#slider").append(sliderItem);

   i++; //Iterate variable});

Answer 1

我感觉发生这种情况是因为您没有关闭</ul>。所以 jQuery append() 函数试图找到 ul 中的最后一个字符，并认为你的 HTML 也是这个 ul 的一部分。

我在http://jsfiddle.net/sudipta/93AqB/ 上创建了一个小提琴

这是我在 HTML 中所做的所有更改，它似乎在 HTML 之前添加了您的数据：

<ul id="slider">
<li>
    <section>
        <blockquote>
            <p>Foo</p>
        </blockquote>
    </section>
</li>
</ul>

<h1>QUOTE</h1>
<img class="truffle" src="Content/Images/truffles/pecan-caramel-truffle.png?text=pecan-caramel-truffle">
<h2>NAME</h2>