0

XMLファイルをロードしてコンテンツを吐き出すJqueryスクリプトがあります。ただし、これらのコンテンツを1行に3列のテーブルにフォーマットしたいと思います。現在、それは1つの長い行を作成し、.eachがいくつかのアイテムをロードした後、新しい関数を呼び出すことについてGoogleで何も見つかりませんでした。

繰り返しになりますが、 if（hideproduct == ""）{}が3回正常に実行された後、関数newrow（）を実行したいと思います。

var product_xml = "xml/products_loaded.xml"
function xmlParser() {
$.ajax({
    type: "GET",
    url: product_xml,
    dataType: "xml",
    success: function(xml) {

        function newrow(){
            $("#output").append("</tr><tr>")
        }

        $(xml).find("SAVED_EXPORT").each(function(){

            var productcode = $(this).find("productcode").text()
            var productname = $(this).find("productname").text()
            var productprice = $(this).find("productprice").text()
            var hideproduct = $(this).find("hideproduct").text()

            if(hideproduct == ""){
                $("#output").append("<td class='product' id='" + productcode + "'>"
                + "<a href='/i/" + productcode + ".htm' title='" + productname + ", " + productcode + "'>" + productname + "</a><br>"
                + "<span><font class='text colors_text'><b><span class='price'>Our Price</span>: </b></font> $" + productprice + "</span><br>"
                + "<img src='/v/vspfiles/photos/" + productcode + "-1.jpg' border='0' alt='" + productname + "'>"
                + "</td>");;

            }
        })      
    }
})
}

これを解決する方法についてアイデアを持っている人には、事前に感謝します。

4

2 に答える 2

2

.each重要なことは、状態を格納するために、の外部にカウンター変数が必要なことです。

var count = 0;

コールバック関数内でローカルvar宣言を使用して状態変数を格納することはできないためです。.each

次に、if (hideproduct ...)ブロック内で、呼び出された回数を数えます。

++count;

必要に応じて、関数を呼び出します

if (count === 3) {
    newRow();
    count = 0;
}

newRow()を使用して不均衡なHTMLタグを作成することはできないため、関数はとにかく機能しません.append。

より良い解決策は次のとおりです。

var tr = null;
var count = 0;

$(xml).find("SAVED_EXPORT").each(function() {
     if (hideproduct === "") {
         if (tr === null) {    // create a new row
             tr = $('<tr>').appendTo('#output');
         }

         tr.append(...);       // add your content

         if (++count % 3 === 0) {
             tr = null;        // force a new <tr> on the next iteration
         }
     }
});

<tr>newが必要な場合にのみ作成され、<td>要素内の新しいコンテンツがに直接追加され、に追加されないことに注意してください#output。

于 2012-09-22T07:58:53.923 に答える
0

これはどうですか？

    var i = 1;
    $(xml).find("SAVED_EXPORT").each(function(){

        [...]

        if(hideproduct == ""){
            [...]
            if(i%3 == 0)
                newRow();
            i++;
        }
    });

「3テスト」をどこでテストしたいか正確にはわかりませんが、アイデアは得られます。基本的に、i％3 == 0テストは、iが3の倍数（0,3,6,9 ...）であるかどうかをチェックします。

于 2012-09-22T08:00:17.983 に答える