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.......

2つの部分からなる質問：

  1. 各<cat>タグは独自のものである必要が<table>あり<item>、各タグはその中の<cat>テーブル行である必要があります<table>。Jqueryコードで何か問題がありますか？

  2. 一部の<desc>値は画像へのリンクである必要がありますが、すべてではありません。XMLファイルの<imgurl>一部のタグのみに追加した場合、 Jqueryを使用してそれをテーブルに適切に書き込むにはどうすればよいですか？<item><a href="...>

よろしくお願いします！

4

6 に答える 6

2

</table>内側から最後のものを取り除き、$(".menu").append外側に追加します。JQueryの追加は、要素を相互に配置します。したがって、各テーブル行でテーブルを閉じようとするのではなく、整形式のテーブル行を整形式のテーブルに配置するのが理にかなっています。

また、次のようにテーブルへの参照を保持します。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/

しかし、tucuxiも正しいです。</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

私は実際に私の質問の2番目の部分に答えました。

同じ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のWebサイト参照を使用して、これをすべて自分で行うことができました。

于 2012-07-26T21:53:17.780 に答える