Question

我试图创建一个函数，在这个函数中循环遍历一组图像并获取它的值并将它们添加到一个对象/数组中。

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

Answer 1

我认为@am不是我是对的，有后续的电话。如果你需要进行thoose调用，我有一个简单的（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);

Answer 2

你必须修改你的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/

Answer 3

fiddle

当我正在研究这个小提琴时，你得到了几个类似的答案。检查最适合你的那个

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

如何将图像的值获取到对象/数组中

3 个答案: