需要帮助jQuery解析XML文档并输出HTML

时间:2011-07-24 22:21:11

标签: jquery xml xml-parsing

我在这里看过几个类似情况的例子,但是没有发现任何与我的具体问题有关的事情。我似乎无法得到它。这是代码:

$(document).ready(function()
{
    $.ajax({
        type: "GET",
        url: "linwood.xml",
        dataType: "xml",
        success: parseXml
    });
    function parseXml(xml){
        $(xml).find("loaction1").each(function(){
            if($(this).find("Available").text() == 'Yes'){
                $("#location1").append("<li><p><u><h4>Unit " + $(this).find("Unit").text() + " [" + $(this).find("Price").text() + "]:</h4></u>" + $(this).find("Description").text() + "<div class='small'>");
                $(this).find("Href").each(function(){
                    $("#location1").append("<a href='" + $(this).text() + "' rel='lightbox' ><img width='45px' height='35px' src='" + $(this).text() + "' /></a>");
                });
                $("#location1").append("</div></p></li>");
            }
        });
    }
});

基本上我要做的就是为id为'location1'的ul生成列表项(li)。到目前为止,我所拥有的是第一行正确显示。但是我知道.append会关闭所有打开的标签。这不是问题,而是:

$(this).find("Href").each(function(){

我需要xml为每个'a'标签提供的href。我正在考虑将它们添加到一个数组中并将该数组包含在'.append'部分的一部分中,但是每个li都有不同数量的链接,我不太确定如何使它们读取然后正确显示。最终结果HTML应如下所示:

<ul id="location1">
<li>
    <p>
       <u><h4>Unit 1 [$600]</h4><u>
       This unit is available for purchase
       <div class='small'>
           <a href='#' rel='lightbox'><img src='#' /></a>
           <a href='#' rel='lightbox'><img src='#' /></a>
           <a href='#' rel='lightbox'><img src='#' /></a>
       </div>
    </>
</li>
<li>
    <p>
       <u><h4>Unit 2 [$400]</h4><u>
       This unit is available for purchase
       <div class='small'>
           <a href='#' rel='lightbox'><img src='#' /></a>
       </div>
    </>
</li>
</ul>

有人认为他们可以帮助我吗?提前谢谢!

2 个答案:

答案 0 :(得分:0)

我可以通过两种方式看到你的可能性。您可以将所有必需的HTML写入单个变量,然后将该变量附加到#location1字段,或者您也可以这样做:

$("#location1").html($("#location1").html()+"HTML here");

显然,第一个选项可能是最好的解决方案(我不知道,如果html()也自动关闭标签,我不知道。)

如果您需要更详尽地解释我的意思(通过代码),我可以提供它。请评论我的回复。

答案 1 :(得分:0)

只需将主要部分更改为:

var container = $("<li><p><u><h4>Unit " + $(this).find("Unit").text() + " [" + $(this).find("Price").text() + "]:</h4></u>" + $(this).find("Description").text() + "<div class='small'>")
$(this).find("Href").each(function(){
    container.append("<a href='" + $(this).text() + "' rel='lightbox' ><img width='45px' height='35px' src='" + $(this).text() + "' /></a>");
});
$("#location1").append(container);