Как наполнить DIV.container DIV-ами из цикла с массивом данных?
var starsMassive = [
// ['Company_name',Age,Investments,Economy,Tech,Non-comm,Prediction,Ppl]
['MacroGenic',8,278,522,134,14,40,128],
['Tengion',7,202,415,16,44,83,58],
['Dendreon',5,103,423,107,505,86,147],
['Neomend',4,74,147,56,493,10,31],
['RheoGene',12,664,3139,0,0,348,3],
];
var i;
for (i=0; i<5; i++) {
$(function(){$('.sky1').html("<div class='stars' id='"+starsMassive[i][0]+"' style='width:100px;height:100px;'></div>");});
}
<body> <div id='sky_container'> <div class='sky3 layer'> </div> <div class='sky2 layer'> </div> <div class='sky1 layer'> </div> </div> </body> <script type='text/javascript' src='js/script.js'></script> </html> |
У меня вставляет только 1 DIV #5 и все. Видимо inner.html заменяет содержимое контейнера. А как сделать чтобы ДОБАВЛЯЛО?
|
Я понял! надо не .html использовать а .append
$(function(){$('.sky1').append("<div class='stars' id='"+starsMassive[i][0]+"' style='width:100px;height:100px;'>
|
Теперь проблема с другим:
Uncaught TypeError: Cannot read property '0' of undefined строка 13 JS как вытащить корректные данные из массива? |
Цитата:
|
ViRuSreloaded,
а вы сам то массив корректным сделайте |
А почему starsMassive[i][0] UNDEFINED ????? :(
|
А как его сделать корректным? где ошибка?
|
ViRuSreloaded,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id='sky_container'>
<div class='sky3 layer'>
</div>
<div class='sky2 layer'>
</div>
<div class='sky1 layer'>
</div>
</div>
<script>
var starsMassive = [
// ['Company_name',Age,Investments,Economy,Tech,Non-comm,Prediction,Ppl]
['MacroGenic',8,278,522,134,14,40,128],
['Tengion',7,202,415,16,44,83,58],
['Dendreon',5,103,423,107,505,86,147],
['Neomend',4,74,147,56,493,10,31],
['RheoGene',12,664,3139,0,0,348,3]
];
var i;
for (i=0; i<5; i++) {
$('.sky1').append("<div class='stars' id='"+starsMassive[i][0]+"' style='width:100px;height:100px;'>"+starsMassive[i][0]+"</div>");
}
</script>
</body>
</html>
|
Я просто не весь HTML вставил чтобы не засорять. Так то все на месте:
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' href='style.css'> <script src="js/jquery-1.11.1.js" type="text/javascript"></script> <link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700' rel='stylesheet' type='text/css'> </head> Вот это стоИт. |
Цитата:
|
Цитата:
|
поставил Вашу строку
$('.sky1').append("<div class='stars' id='"+starsMassive[i][0]+"' style='width:100px;height:100px;'>"+starsMassive[i][0]+"</div>");
В чем ошибка в моей? |
ААААААААААААААА Вау ТОварисечэ!!!!! ОГРОМНОЕ СПАСИБО!!!!
|
Осталось 2 математических вопроса:
1) Как сделать такое условие, чтобы в зависимости от максимального цифрового значения колонки в массиве, другие DIV-ы рисовались пропорционально значению. Например "+starsMassive[5][0]+"=3139. Это максимальное значение. В этом случае ширина и высота дива "100px", а "+starsMassive[i][3]+"=522. значит ширина и высота примерно "15px" 2) Как сделать чтобы в зависимости от размера DIV-а он бы вставлялся в <div class='.sky1'> если размер <33px в <div class='.sky2'> если размер >33px <66px в <div class='.sky1'> если размер >66px <100px |
ViRuSreloaded,
var a = (starsMassive[i][3] * 100)/starsMassive[5][0]; var x = a < 33 ? '.sky2' : '.sky1'; $(x).append... |
| Часовой пояс GMT +3, время: 20:02. |