Question

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

$(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>

有人认为他们可以帮助我吗？提前谢谢！

Answer 1

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

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

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

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

Answer 2

只需将主要部分更改为：

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);

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

2 个答案: