0

我知道还有很多其他问题涉及这个主题，但没有一个专门解决我的问题。

我正在获取一个 XML 文件，使用 Jquery 对其进行解析并将其转换为 HTML 表。在页面视觉上，它看起来不错；桌子看起来应该。但实际上，Jquery 正在对 html 做一些奇怪的事情。

这是 XML：

<?xml version="1.0" encoding="us-ascii"?>
<wsmenu>
<cat id="snacks">
    <item>
        <desc>marta&#8217;s fresh tortillas &amp; camp bread, pit master fat</desc>
        <price>4</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>smoked almonds, chile salt</desc>
        <price>4</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>smoked marinated olives</desc>
        <price>4</price>
        <wood>o</wood>
    </item>
    <item>
        <desc>crispy potatoes, smoked garlic aioli</desc>
        <price>6</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>smoked artichokes, lemon and parmesan</desc>
        <price>9</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>smoked hummus, pit master fat camp bread &amp; tortilla chips</desc>
        <price>8</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>smoked whitefish dip, fresh tortilla chips</desc>
        <price>9</price>
        <wood>o</wood>
    </item>
</cat>
<cat id="salads">
    <item>
        <desc>smoked chicory, chicken chicharron, mustard-red wine vinaigrette, provolone</desc>
        <price>8</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>3 kale salad, celery greens, guanciale, smoked pepita, manchego</desc>
        <price>8</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>hickory braised spelt, smoked almond pesto &amp; tomato</desc>
        <price>8</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>beet and fresh ricotta salad, smoked pistachios</desc>
        <price>8</price>
        <wood>m</wood>
    </item>
</cat>
<cat id="sandwiches">
    <item>
        <desc>pulled pork, bbq, house cole slaw, mustard &amp; pickles</desc>
        <price>8</price>
        <wood>o</wood>
    </item>
    <item>
        <desc>chopped beef, house mustard &amp; pickles</desc>
        <price>8</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>woodshed burger, chopped beef, todays sausage, smoked cheddar, traditional garnish</desc>
        <price>11</price>
        <wood>h</wood>
    </item>
</cat>
<cat id="simple plates">
    <item>
        <desc>brisket stuffed piquillo peppers, bone broth &amp; cotija</desc>
        <price>9</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>local acorn squash, tuaca, dark brown sugar, smoked pepper hollandaise</desc>
        <price>8</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>today&#8217;s sausage, house mustard &amp; pickles</desc>
        <price>8</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>pea tendrils, smoked chilies, citrus &amp; hickory butter</desc>
        <price>8</price>
        <wood>o</wood>
    </item>
</cat>
<cat id="tacos">
    <item>
        <desc>brisket stuffed piquillo peppers, bone broth &amp; cotija</desc>
        <price>9</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>local acorn squash, tuaca, dark brown sugar, smoked pepper hollandaise</desc>
        <price>9</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>today&#8217;s sausage, house mustard &amp; pickles</desc>
        <price>10</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>pea tendrils, smoked chilies, citrus &amp; hickory butter</desc>
        <price>9</price>
        <wood>m</wood>
    </item>
</cat>
<cat id="traditional q">
    <item>
        <desc>beef ribs</desc>
        <price>12/lb</price>
        <wood>o</wood>
    </item>
    <item>
        <desc>pork ribs</desc>
        <price>12/lb</price>
        <wood>p</wood>
    </item>
    <item>
        <desc>smoked beef tenderloin</desc>
        <sub>served cold</sub>
        <price>11</price>
        <wood>h</wood>
    </item>
</cat>
<cat id="new q">
    <item>
        <desc>smoked red fish enpapillote, vegetables of the season</desc>
        <price>19</price>
        <wood>o</wood>
    </item>
    <item>
        <desc>game bird, wood braised spelt &amp; smoked artichokes</desc>
        <price>21</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>fancy mushrooms of the season, 4 chiles, polenta, vin cotta &amp; hen egg</desc>
        <price>18</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>bowl of ramen noodles, bone broth, pulled pork, chiles, &amp; quail egg</desc>
        <price>15</price>
        <wood>p</wood>
    </item>
</cat>
<cat id="dining with friends">
    <sub>please allow 30 minutes, feeds 4 people</sub>
    <item>
        <desc>16 hour smoked beef shin, fresh ricotta, chile, smoked oil borracho beans, 3 kale salad</desc>
        <price>75</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>open fire paella of mussels, clams, shrimp rabbit-rattlesnake sausage, game bird, fennel aioli</desc>
        <price>75</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>60 oz. bistecca alla fiorentina, crispy potatoes</desc>
        <price>90</price>
        <wood>m</wood>
    </item>
</cat>
<cat id="sides">
    <item>
        <desc>fresh chips</desc>
        <price>5</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>smoked Loaded baked potato</desc>
        <sub>add pork or beef $3</sub>
        <price>5</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>borracho beans</desc>
        <price>5</price>
        <wood>h</wood>
    </item>
    <item>
        <desc>mexican corn</desc>
        <price>4</price>
        <wood>m</wood>
    </item>
    <item>
        <desc>confit potato salad, mint, red pepper, crispy garlic</desc>
        <price>4</price>
        <wood>m</wood>
    </item>
</cat>
</wsmenu>

这是Jquery：

function parseXML(xml){
$(xml).find("cat").each(function()
{
  $(".menu").append("<table class='mnutbl'><tr><th>"+$(this).attr("id")+"</th></tr>");

$(this).find("item").each(function()
{
    $(".menu").append("<tr class='mnutbl'><td>"+$(this).find("wood").text()+
    "</td><td>"+$(this).find("desc").text()+
    "</a></td><td>"+$(this).find("price").text()+
    "</td></tr></table>")});
});
};

电流输出：

Jquery is writing <table> and <th> with attribute "id" for each <cat> tag, then separate <tr> for each <item> tag (these <tr>'s are NOT contained in the <table>), like so:
<table class="mnutbl">
 <tr>
  <th>Snacks</th>
 </tr>
</table>
<tr>
 <td>m</td>
 <td>marta's fresh...</td>
 <td>4</td>
</tr>
etc.......

两部分问题：

  1. 每个<cat>标签都需要是它自己的<table>，并且每个<item>标签中的标签都<cat>需要是其中的表行<table>。我的 Jquery 代码有问题吗？

  2. 一些<desc>值需要是图像的链接，但不是全部。如果我<imgurl>只添加到 XML 文件中的一些标签，我怎么能正确地将它作为使用 Jquery<item>写入表中？<a href="...>

非常感谢您的帮助！

4

6 回答 6

2

</table>从您的内部删除最后一个$(".menu").append，并将其添加到外部。JQuery 的 append 将元素相互放置 - 因此将格式良好的表格行放入格式良好的表格中是有意义的，而不是尝试用每个表格行关闭表格。

另外，保持对表的引用如下：function parseXML(xml){

$(xml).find("cat").each(function() {
  var table = $("<table class='mnutbl'><tr><th>"+$(this).attr("id")+
    "</th></tr></table>");
  $(".menu").append(table);

  $(this).find("item").each(function(){
    table.append("<tr class='mnutbl'><td>"+$(this).find("wood").text()+
      "</td><td>"+$(this).find("desc").text()+
      "</a></td><td>"+$(this).find("price").text()+
      "</td></tr>")});
  });
};

然后浏览器添加所有额外的 table-start-tags 来补偿。

于 2012-07-26T16:37:58.837 回答
2

您不是将表格行附加到表格，而是附加到.menu. 试试这个：

$(".menu").find('table').last().append("<tr ..... ");

http://jsfiddle.net/mblase75/fppfX/

吐槽西也说得对，不过。不要附加结束</table>标签。

于 2012-07-26T16:38:34.507 回答
0

您总是在追加，.menu但您必须将项目追加到表中。为此，请为表提供一个 ID 以对其进行识别。或者更简单：将其存储到一个变量中，首先附加所有行，然后将整个表附加到页面。

function parseXML( xml ) {
    $( xml ).find( 'cat' ).each( function() {
        var id = $( this ).attr( 'id' );
        var table = $( '<table class="mnutbl" id="' + id  + '"><tr><th>' + id  + '</th></tr></table>' );

        $( this ).find( 'item' ).each( function() {
            table.append( '<tr><td>' +
                $( this ).find('wood').text() +
                '</td><td>' + $( this ).find( 'desc' ).text() +
                '</a></td><td>' + $( this ).find( 'price' ).text() +
                '</td></tr>' );
        } );

        $( '.menu' ).append( table );
    } );
}
于 2012-07-26T16:42:02.260 回答
0

这个问题的一个更好的解决方案是使用 XSL 转换 (XSLT)，这是一种专门为像这样的任务创建的语言。

转换背后的语言和逻辑非常简单易学。你可以在这里查看：http: //www.w3schools.com/xsl/

于 2012-07-26T16:43:21.317 回答
0

我在您的代码中看到的问题是，最初您在搜索“item”标签时关闭了表格标签。

function parseXML(xml){
$(xml).find("cat").each(function()
{
  $(".menu").append("<table class='mnutbl'><tr><th>"+$(this).attr("id")+"</th></tr>");

$(this).find("item").each(function()
{
    $(".menu").append("<tr class='mnutbl'><td>"+$(this).find("wood").text()+
        "</td><td>"+$(this).find("desc").text()+
        "</a></td><td>"+$(this).find("price").text()+
        "</td></tr>")});
    });
$(".menu").append("</table>");

};

于 2012-07-26T16:45:01.013 回答
0

我实际上回答了我问题的第二部分。

使用相同的 XML 文件，只是这次一些<item>标签现在有一个属性，imgurl=""该属性包含一个照片的相对 url。

我更改了我的 JQuery 函数parseXML以包含一个检查属性是否imgurl存在的条件，然后围绕项目描述创建指向它的链接

这是代码：

function parseXML(xml){
$(xml).find("cat").each(function()
{
$(".menu").append("<table class='mnutbl'><tr><th>"+$(this).attr("id")+"</th></tr>");

$(this).find("item").each(function()
{
    var $x;
    var $image = $(this).attr("imgurl");
    if ($image == null) {
        $x = $(this).find("desc").text();
    }
    else {
        $x = "<a href='"+$image+"'>"+$(this).find("desc").text()+"</a>"
    }
    $(".menu").find("table").last().append("<tr><td>"+$(this).find("wood").text()+
    "</td><td>"+$x+"</td><td>"+$(this).find("price").text()+
    "</td></tr>")
});
$(".menu").append("</table>");
});
};

我为自己感到非常自豪，因为我对这个级别的编程仍然很陌生（这对你们大多数人来说可能是非常基础的），而且我通过 w3c 和 jQuery 网站参考自己设法做到了这一切。

于 2012-07-26T21:53:17.780 回答