范围问题，将迭代器"i“从循环的一个for循环引用到另一个for循环

Question

问题

我认为这两个for loops的范围问题。它们都在迭代不同数量的项。

• 我正在试图找出如何从第二个循环中的第一个循环引用i 迭代器.
• 具体来说，我在第二个循环中if-语句的其他部分连接一个字符串，并且我需要能够同时引用i和j。

澄清

我试图创建一个11x8网格，共88个方格。他们需要有一个特定的类附加到他们，这将着色的方块。每个正方形都有一个从1到88之间的数据id，它决定了它们在网格上的位置。需要根据数据着色的状态/方格不像在data.json片段中看到的那样是顺序的。

循环1

我从0，1，2. 50开始

for (i = 0; i < data.length; i++) {}

循环2

从1，2，3. 88开始

for (j = 1; j < squaresTotal + 1; j++) {

    // If it doesn't exist, push those values into the an array
    if (states.indexOf(j) === -1){
        blanks.push(j);

        $("<div class='square is-white' data-id='" + j + "'></div>").appendTo(".map");
    } else {
        $("<div class='square " + data[i].class + "' data-id='" + j + "'><p class='square__state'>" + data[i].abbr + "</p></div>").appendTo(".map");
    }
}

scripts.js

<script>
        $(function(){
            $.ajax({
                url: 'data.json',
                method: 'GET',
                dataType: 'json'
            }).then(main);
        });

        function main(data) {

            // The parent container that holds the map
            let map = $(".map");

            // IDs of the states and the blank tiles
            let blanks = [];
            let states = [];

            // Contains data for all 50 states
            for (i = 0; i < data.length; i++) {

                // Data is sorted by the rank field in descending order
                data.sort(function(a, b){
                    return a['rank'] - b['rank'];
                });

                // Fields for the data table below the map
                // Numbered rank (i.e. 1, 2, 3)
                let rank = data[i].rank;

                // Full state name (i.e. Alaska)
                let state = data[i].state;

                // Total consumer electric power
                let value = (data[i].total_consumption_electric_power).toLocaleString();

                // Each row in the table contains a rank, state and value
                if (rank) {
                    $("<tr><th scope='row'>" + data[i].rank + "</th><td>" + data[i].state + "</td><td>" + value + "</td></tr>").appendTo("tbody");
                }

                // Push the ids to the empty states array
                states.push(data[i].id);
            }

            // The grid is 11 by 8 for a total of 88 squares
            const squaresTotal = 88;

            for (j = 1; j < squaresTotal + 1; j++) {

                // If it doesn't exist, push those values into the an array
                if (states.indexOf(j) === -1){
                    blanks.push(j);

                    $("<div class='square is-white' data-id='" + j + "'></div>").appendTo(".map");
                } else {
                    $("<div class='square " + data[i].class + "' data-id='" + j + "'><p class='square__state'>" + data[i].abbr + "</p></div>").appendTo(".map");
                }
            }

            var pymChild = new pym.Child();
            pymChild.sendHeight();
        }


    </script>

data.json (片段)

[
  {
    "id": 1,
    "state": "Alaska",
    "rank": "",
    "abbr": "AK",
    "class": "square-1",
    "total_consumption_electric_power": 707913
  },
  {
    "id": 11,
    "state": "Maine",
    "rank": "",
    "abbr": "ME",
    "class": "square-1",
    "total_consumption_electric_power": 62360
  },
  {
    "id": 17,
    "state": "Wisconsin",
    "rank": "",
    "abbr": "WI",
    "class": "square-5",
    "total_consumption_electric_power": 19482575
  }
]

Answer 1

我简化了一些代码，以展示如何构建代码。

如果您想要使用JQuery进行呈现，则很容易将其转换回来。

这并不能回答索引i，索引j的问题，因为您实际上不需要那些人以我个人看来更简单的方式来完成这个任务。

​

var states = [
  {
    "id": 1,
    "state": "Alaska",
    "rank": 2,
    "abbr": "AK",
    "class": "square-1",
    "total_consumption_electric_power": 707913
  },
  {
    "id": 11,
    "state": "Maine",
    "rank": 3,
    "abbr": "ME",
    "class": "square-1",
    "total_consumption_electric_power": 62360
  },
  {
    "id": 17,
    "state": "Wisconsin",
    "rank": 1,
    "abbr": "WI",
    "class": "square-5",
    "total_consumption_electric_power": 19482575
  }
];

var render_rankings_table = function( states ) {
  // We want the table to be sorted by rank.
  // By creating a new array from the passed states array,
  // we retain the original order inside the states array.
  var sorted_by_rank = states.sort((a, b ) => a.rank - b.rank );
  // Create a row for each sorted_by_rank state.
  // Since this is a new array, we can just loop over it without affecting the original states array.
  var rows_html = sorted_by_rank.map( state => {
    return `<tr><td scope="row">${ state.rank }</td><td>${ state.state }</td><td>${ state.total_consumption_electric_power }</td></tr>`;
  });
  // Overwrite the content of the table to render it.
  // See how we update the table only once at the end instead of for every state individually.
  var table = document.querySelector( '#electric_consumption_ranking' );
  table.innerHTML = rows_html.join( '' );
};

// The original contains: if (states.indexOf(j) === -1){ blanks.push(j); }
// The states array contained all the id's.
// So translated, this means that the id of the state, equals the square it will render to.
// So Maine, with id 11, will be the eleventh square.
var render_squares = function( states ) {
  // Creating the 88 squares and mapping the states to it can be done in multiple ways.
  // I would prefer the 'easy' solution of just creating an array with 88 elements and
  // then putting the states in the correct position,
  // instead of figuring out the position of the state inside the loop.
  var squares = Array.from({ length: 88 }).fill( false );
  // We now have an array cotnaining 'false' 88 times.
  // Now lets add the states to it.
  // The squares start at 1, the array index starts at 0, so subtract 1 from the id to get the correct index.
  states.forEach( state => { squares[ state.id - 1 ] = state; });
  // Now all the states are in the correct position, according to their id.
  // Create the squares.
  var squares_html = squares.map(( state, index ) => {
    if ( state ) {
      return `<div class="square ${ state.class }" data-id="${ index + 1 }"><p class="square__state">${ state.abbr }</p></div>`;
    
    }
    // The data-ids start at 1, the array index starts at 0, so add 1 to the index.
    // The <div> has to have height to actually show up on the screen.
    // The easiest way is to make sure the div contains text, so adding a space already works.
    // We could also give the divs a minimum height with CSS.
    else {
      return `<div class='square is-white' data-id="${ index + 1 }">&nbsp;</div>`;
    }
  });
  // Overwrite the map.
  var map = document.querySelector( '.map' );
  map.innerHTML = squares_html.join( '' );
};

render_rankings_table( states );
render_squares( states );

table {
  border-collapse: collapse;
}

td {
  border: 1px solid grey;
}

.square {
  border-bottom: 1px solid grey;
  border-top: 1px solid grey;
}

.map {
  border: 1px solid grey;
}
.is-white {
  background-color: rgb( 238, 238, 238 );
}
.square-1 {
  background-color: red;  
}
.square-5 {
  background-color: green;
}

<table id="electric_consumption_ranking"></table>
<figure class="map"></figure>

​