取決於數組的長度

創建自定義的CSS格我有一個數據[1,2,3,4,5,6,7]陣列和我想要顯示1行取決於數組的長度

<div class=row> 
    <div>data1</div> 
    <div>data2</div> 
</div> 
<div class=row> 
    <div>data3</div> 
    ...

所以我想用JS做2項。據我所知，我需要像[[1,2],[3,4],[5,6],[7]]，但不知道如何使它。如果有人以前做過，並能幫助我，那將會很棒。

來源

2016-07-26 nl pkr

你只需要重新排列的數組還是帶有div的部分？ –

你能解釋更多嗎？您是否希望將js數據格式化爲您指定的html格式，或者您擁有這些div，並且希望它們每行安排2個？ –

@NinaScholz @NinaScholz偉大的，如果它，但如果你只知道它的一部分，請顯示它，謝謝 –

您可以通過2使用簡單的for循環和增量，並添加到HTML

var ar = [1, 2, 3, 4, 5, 6, 7]; 
 
for (var i = 0; i < ar.length; i += 2) { 
 
    document.body.innerHTML += '<div class="row"><div>data' + ar[i] + '</div>' + ((ar[i + 1]) ? '<div>data' + (ar[i + 1]) + '</div>' : '') + '</div>'; 
 
}

div div { 
 
    float: left; 
 
    width: 50%; 
 
}

來源

2016-07-26 15:09:11

你可以迭代，並使用計數器進行分組。

var array = [1, 2, 3, 4, 5, 6, 7], 
 
    div; 
 

 
array.forEach(function (a, i) { 
 
    var d = document.createElement('div'); 
 
    if (!(i & 1)) { 
 
     div = document.createElement('div'); 
 
     document.body.appendChild(div); 
 
    } 
 
    d.innerText = a; 
 
    div.appendChild(d); 
 
});

div div { float: left; width: 50%; }

來源

2016-07-26 15:09:55

我會用mod，看它是否是偶數。這應該讓你開始。在輸出到屏幕之前，你還應該檢查索引中的未定義 - 我沒有在這裏實現。如果你正在使用bootstrap，那麼這不會有問題。如果沒有，那麼你將需要寫一些CSS。

$(document).ready(function() { 

    var data = ["1","2","3","4","5","6","7"]; 

    $.each(data, function (index, name) { 
     // if divisible by 2 
     if(index % 2 === 0 ) { 
      // take index and add 1 to it 
      var output = "<div class='row'> <div class='col-md-6'>" + data[index] + "</div> <div class='col-md-6'>" +data[index + 1] + "</div> </div>"; 
      console.log(output); 
     } 

    }); 

});

來源

2016-07-26 15:13:50 Radmation

編輯：刪除JQuery的依賴

https://jsfiddle.net/r4kLddvh/

HTML：

<p id="parent"></p>

JS：

var data = [1,2,3,4,5,6,7]; 

function makeRow(a,b){ 
    a = !!a ? a : ""; 
    b = !!b ? b : ""; 
    return "<div class='row'><div class='cell'>"+a+"</div>" + "<div class='cell'>"+b+"</div></div>"; 
} 

for(var i=0; i< data.length; i = i + 2){ 
    document.getElementById("parent").innerHTML += (makeRow(data[i], data[i+1])); 
}

CSS：

.cell{ 
    display:table-cell; 
    height:20px; 
    width:20px; 
    border:1px solid black; 
} 
.row{ 
    display:block; 
}

來源

2016-07-26 15:25:23 spozun

取決於數組的長度

回答

相關問題