0

配列のようにオブジェクトをループしようとしています。変数名にループカウンターを追加するのに苦労しています。

私はこのようなオブジェクトを持っています（私がここで見つけた、で出力dump()）：

object(2): {
  elem0:  array(4): {
    [0]:  string(27): "http://placehold.it/300x300"
    [1]:  string(3): "0.8"
    [2]:  string(4): "-150"
    [3]:  string(3): "200"
  }
  elem1:  array(4): {
    [0]:  string(27): "http://placehold.it/300x300"
    [1]:  string(3): "0.6"
    [2]:  string(3): "-70"
    [3]:  string(3): "458"
  }
}

これが私がそれをループしようとしている方法です：

jQuery(document).ready(function($) {

    // Provides object-measuring functionality
    Object.size = function(obj) {
        var size = 0, key;
        for (key in obj) {
            if (obj.hasOwnProperty(key)) size++;
        }
        return size;
    };

    // Returns the number of objects in my object
    var size = Object.size(window.depthElems);

    /*
    This is where I'm having difficulty.
    I would like to use window.depthElems.elem0,
    then window.depthElems.elem1, etc.
    */

    for (var i = 0; i < size; i++) {
        $('.wrapper').append('<img src="' + window.depthElems.elem+i+[0] + '" />'); 
    }

});
4

2 に答える 2

3

私は議論のために、私の質問も答えとして提供します。次を使用できます。

for(element in window.depthElems) {
    if(window.depthElems.hasOwnProperty(element)) {
        $('.wrapper').append('<img src="' + window.depthElems[element] + '" />');
    }
}

これはよりエレガントであるだけでなく、はるかに少ないコードで済みます。もちろん、他のコードを使用する理由がある場合は、そのように言ってください。

注：このコードは、「配列」を読み取る機能も含めるように編集されていますが、問題は「オブジェクト」で機能するようにすることでした。'objects'を使用する場合、'hasOwnProperty'チェックは不要です。

注2：Azdervar hasOwn = Object.prototype.hasOwnProperty;が言ったように使用することもできますが、これは優れた保護手段です。

于 2012-07-25T18:14:51.097 に答える
2

私の答えが上を超えている場合はお詫び申し上げます。JS（私は多くの経験を積んでいます）の誤用によるさらなる怪我を防ぎたいと思っています。

jQuery(document).ready(function($) {

    var i; // there is no block scope in JS, so better to be clear and define i here
    var $wrapper; // also

    // Changing the JS built-in objects is problematic most of the time
    // You should learn from jQuery and do wrapping instead
    // Or at least just a good namespasing like:
    // MyFramework.objectSize = function (obj) {}

    Object.size = function(obj) {
        var size = 0, key;
        var hasOwn = Object.prototype.hasOwnProperty; // will explain further down
        for (key in obj) {
            // if obj has redifined hasOwnProperty = function(){ return false; }?
            // it's better to use hasOwn like this if(hasOwn.call(obj,key)) {}
            // and please do use braces even if only 1 statement
            if(hasOwn.call(obj,key)) size++;
        }
        return size;
    };

    // Returns the number of objects in my JSON object
    var size = Object.size(window.depthElems);

    $wrapper = $('.wrapper'); // cached so jQuery doesn't search for it each iteration    

    // i is scoped to the whole function anyways
    for (i = 0; i < size; i++) {

        // $.each even guards you of the changing DOM which can cause
        // infinite loops (you don't have that problem here, but... good to know
        $.each(window['depthElems'+i],function(index,element){
            $wrapper.append('<img src="' + element + '" />');
        }); 
    }

});

また、すでにelem1、elem2、elem3、...という名前のオブジェクトを作成しているので、次のような2次元配列を使用することもできます。window.depthElems = [[],[],[]]

于 2012-07-25T18:39:28.447 に答える