0

画像のセットをループしてその値を取得し、それらをオブジェクト/配列に追加する関数を作成しようとしています。

<div id="col1">
    <img id="layer_a" src="imga.jpg" height="320" width="400" class="holder">
    <img id="layer_b" src="imgb.jpg" height="320" width="400" class="holder">
    <img id="layer_c" src="imgc.jpg" height="320" width="400" class="holder">
    <img id="layer_d" src="imgd.jpg" height="320" width="400" class="last">
</div>
<div id="col2">
    <img id="layer_e" src="imge.jpg" height="320" width="400" class="holder">
    <img id="layer_f" src="imgf.jpg" height="320" width="400" class="last">
</div>

スクリプト：

var data = {};

function pickimage() {
$("img .holder").each(function() {
    var idset = this.attr('id');
    var srcset = this.attr('src');
    var heightset = this.attr('height');
    var widthset = this.attr('width');
    var newSet = {
        'id': idset,
        'src': srcset,
        'width': widthset,
        'height': heightset
    };
    data.images.push(newSet);
    for (var i = 0; i < data.images.length; ++i) {
        if (data.images[i].id == id) return i;
    }
});

}

pickimage();

データを次のように表示したい：

var data = {
 "images": [{
    "id": "layer_a",
    "src": "imga.jpg",
    "width": "400",
    "height": "320"}]
};

同じIDを2回取得せずになど

4

3 に答える 3

1

@am not i amは、その後の呼び出しがあるのは正しいと思います。これらの呼び出しが必要な場合は、それを処理する単純な（jsFiddle）[http://jsfiddle.net/CypAA/]があります。

var data = [];
var ids = {};

function pickImage() {
    $('img.holder').each(function() {
        if (ids[this.id]) return;
        ids[this.id] = 1;

        data.push({
            id: this.id,
            src: this.src,
            width: this.width,
            height: this.height
        });
    });
}

pickImage();
pickImage();
pickImage();

console.log(data);​
于 2012-06-06T20:19:05.883 に答える
1

JSを次のように変更する必要があります

var data = {
    images: []
};

function pickimage() {
    $("img.holder").each(function() {
        var _self = $(this);
        data.images.push({
            'id': _self.attr('id'),
            'src': _self.attr('src'),
            'width': _self.attr('width'),
            'height': _self.attr('height')
        });
    });
}

pickimage();

for (var i = 0, len=data.images.length; i < len; i++) {
    console.log(data.images[i]);
}

http://jsfiddle.net/LDFrp/を参照してください

于 2012-06-06T20:26:51.130 に答える
1

フィドル

私がフィドルに取り組んでいる間、あなたはいくつかの同様の答えを得ました。あなたに最適なものをチェックしてください

JS

var data = {
    'images': Array()
}

function pickimage() {
$("#imagecontainer").find('img').each(function() {
    var img= $(this)
    var idset = img.attr('id');
    var srcset = img.attr('src');
    var heightset = img.attr('height');
    var widthset = img.attr('width');
    var newSet = {
      'id': idset,
      'src': srcset,
      'width': widthset,
      'height': heightset
    };
    data.images.push(newSet);

});

}

pickimage();
alert(JSON.stringify(data))
于 2012-06-06T20:35:45.477 に答える