0

こんにちは、json からデータを読み取るスクリプトを書いています。

私はいくつかのことをしたい：

データをループし<divs>、json からのデータを含む新しいものを追加します

1 行に 3 つのアイテムを配置したい

行を生成したいdomにdivを追加するこの方法を使用しようとするのはこれが初めてです（添付したjsonサンプルデータには1つのエントリしかありません）私の意図したhtml構造は次のとおりです：（ relatedDetails および関連ヘッダーdivページに既に存在します。

<div class="relatedDetails">
    <div class="relatedHeader">Unit Bases near by:</div>
    <div class="detailRow">
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
    </div>
    <div class="detailRow">
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
        <div class="relatedItem">
            <img class="relatedImage" src=""/>
            <div class="relatedTitle">Title</div>
        </div>
    </div>
</div>

私のjsonは次のようになります：

[{"id":"5","slug":"boston-manor-park-car-park","name":"Boston Manor Park car park","image":"","pinType":"ub","addr":"Boston Manor Road, London ","lat":"51.48967509541307","lng":"-0.3164195004638941","contact":"Reel Film Locations: ","restrictions":"Shared use with park users. External features unavaliable at present"}]

このデータを解析して上記の構造を作成するためにいくつかのjqueryを作成しましたが、domにdivを追加していません。

変数を使用してクラスにアクセスする方法と関係があるかどうかわからないので、<divs>追加したい行/関連アイテム、または何か他のものを知っています。

私のjqueryは次のとおりです。

function createRelated(myRelated){
        alert('create related')
        console.log(myRelated);
        var relCount = 0;
        var rowCount = 0;
        var itemCount = 0;
        $.each(myRelated, function() {
            if(relCount == 3){
                relCount = 0;
            };
            // create a new row
            if(relCount = 0){
                var rowClass = 'relRow'+rowCount;
                $("<div/>",{
                    "class": "detailRow "+rowClass
                }).appendTo( ".relatedDetails" );
                rowCount++;
            }
            // create a new related item div
            var itemClass = 'item'+itemCount;
            $("<div/>",{
                "class": "relatedItem "+itemClass,
            }).appendTo(rowClass);

            //add the data to the related item
            $(itemClass).data('location',this);
            //add item to to our row
            $(rowClass).append(itemClass);
            // now loop through the keys and values and add the data
            $.each(this, function(k, v) {
                //add divs to the related item div          
                });
            itemCount++;
            relCount++;
        });
    };

テストページ: http://2012.reelfilmlocations.co.uk/Modules/builder_areaLocs.php

* 更新* ここで js フィドルを作成しました: http://jsfiddle.net/DizzyHigh/35Jrc/2/

divが作成されていないので、理由がわかりません:(

4

2 に答える 2

0

私は信じられないほど愚かであることがわかりました.....

if(relCount = 0){
    //do stuff
}

する必要があります

if(relCount == 0){
    //do stuff
}
于 2013-03-14T16:44:11.833 に答える
0

サンプル コードでは、新しい行をドキュメントに append() することはありません。すべての要素の生成が完了したら、ドキュメントに挿入するポイントへの参照を取得し、新しい要素をそれに追加する必要があります。

$(rowClass).appendTo("#WhereIWantMyData");

データを挿入したい id="WhereIWantMyData" を持つ HTML の要素がある場所。

于 2013-03-13T18:38:35.233 に答える