循環嵌套數組並使用值渲染div

Question

我有一個看起來像這樣的數組：

arr = [
  ["10", "1", "1200", "630"],
  ["272", "45", "654", "654"],
  ["10", "139", "367", "372"],
  ["825", "134", "369", "371"]
];

每個數組內部的值是我要渲染的div的參數（x，y，width，height）。 所以例如第一個div應該有道具：

left: 10,
top: 1,
width: 1200,
height: 630

我目前的實現如下：

for (var i = 0; i < arr.length; i++) {
      $('<div/>', {
          class: 'class-' + i
        }).appendTo($('body'));
      for (var j = 0; j < arr[i].length; j++) {
            $('.class-' + i).css({
                position: 'absolute',
                left: arr[i][j],
                top: arr[i][j],
                width: arr[i][j],
                height: arr[i][j]
         });
     }
}

所以在這種情況下，我想為每個數組創建4個不同的div，並在每個數組中給出適當的CSS樣式。 不幸的是它沒有用，因為我在索引方面遇到了一些問題。

你知道如何解決這個問題嗎？

謝謝！

Answer 1

問題在於這部分代碼：

for (var j = 0; j < arr[i].length; j++) {
        $('.class-' + i).css({
            position: 'absolute',
            left: arr[i][j],
            top: arr[i][j],
            width: arr[i][j],
            height: arr[i][j]
        });
}

您只需將給定div的樣式設置一次 。 在你的代碼中，它為每個具有class-i div設置css樣式4次，其中i= 1 to arr.length 。

 arr = [ ["10px", "1px", "12", "63"], ["272px", "45px", "65", "65"], ["101px", "139px", "36", "37"], ["825px", "134px", "36", "31"] ]; for (var i = 0; i < arr.length; i++) { $('<div/>', { class: 'class-' + i }).appendTo($('body')); $('.class-' + i).css({ position: 'absolute', left: arr[i][0], top: arr[i][1], width: arr[i][2], height: arr[i][3] }); } 

 div{ background-color:red; border:1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

您可以使用.map() ，將對象傳遞給.css() 。 另請注意， left和top值應將"px"連接到數值

 arr = [ ["10px", "1px", "1200", "630"], ["272px", "45px", "654", "654"], ["10px", "139px", "367", "372"], ["825px", "134px", "369", "371"] ]; $("body") .append( arr.map(([left, top, width, height], i) => $("<div>", { "class": "class-" + i, text: i, css: {left, top, width, height} })) ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 

plnkr http://plnkr.co/edit/4DgX13CoQAy9QC8oUA1T?p=preview

Answer 3

你不想再次迭代第二次。 在你的第一個for循環中，你得到["10", "1", "1200", "630"] 。 如果再次遍歷它，則會獲得單個值。 這就是你要找的東西 - 我對jQuery有點生疏，你可以優化它。

for (var i = 0; i < arr.length; i++) {
    var parent =  $('<div/>', {
        class: 'class-' + i
    }).appendTo($('body'));
    $('.class-' + i).css({
        position: 'absolute',
        left: arr[i][0],
        top: arr[i][1],
        width: arr[i][2],
        height: arr[i][3]
    });
}

Answer 4

這是你的小提琴 。 希望有所幫助。

 var arr = [ ["10", "1", "1200", "630"], ["272", "45", "654", "654"], ["10", "139", "367", "372"], ["825", "134", "369", "371"] ]; arr.forEach(function(a) { var div = $('<div/>').css({ left: a[0], top: a[1], width:a[2], height: a[3] }); $('body').append(div); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 5

 for (var i = 0; i < arr.length; i++) { $('<div/>', { class: 'class-' + i }).appendTo($('body')); $('.class-' + i).css({ position: 'absolute', left: arr[i][0], top: arr[i][1], width: arr[i][2], height: arr[i][3] }); } 

你只需要一個循環。

Answer 6

以下是使用reduce和recursive函數的示例：

 var arr = [ ["10px", "1px", "1200", "630"], ["272px", "45px", "654", "654"], ["10px", "139px", "367", "372"], ["825px", "134px", "369", "371"] ]; var mapValuesToCss = ([left, top, width, height])=> Object.assign( {left,top} ,{ width:width+"px", height:height+"px" } ); var addIndexAsContent = (value,index)=>value.html(index) var createDivsReduce = css => css.reduce( (divs,css)=> divs.concat( $( "<div>", css ) ) ,[] ); var createDivsRecursive = divs => css => { if(css.length===0){ return divs; } return createDivsRecursive (divs.concat($("<div>",css[0]))) (css.slice(1));//recursively call itself } //using reduce $("body") .append( createDivsReduce(arr.map(mapValuesToCss)) .map(addIndexAsContent) ); //recursively $("body") .append( createDivsRecursive([])(arr.map(mapValuesToCss)) .map(addIndexAsContent) ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>