Question

im trying to create a function where it loops through a set of images and gets the values of it and adds them to an object/array.

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

the script:

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();

i want the data to look like this:

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

and so on without getting the same id’s twice

Answer 1

I think @am not i am is right that there are subsequent calls. If you need to have thoose calls, I have a simple (jsFiddle)[http://jsfiddle.net/CypAA/] that takes care of that.

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);​