將元素按順序追加到每個div

Question

好吧，我正在嘗試使用css和html制作徽標，這是輸出：

的jsfiddle

現在我想用jquery並動態創建所有div 。 到目前為止，這是我所做的：

var count = 13;
var n = 0;

for(var i = 0; i < count; i++) {
    n++;
    $('<div class="LogoRow" id="LogoRow-'+n+'"></div>').appendTo('#Logo');
}

$('#Logo .LogoRow:nth-child(odd)').addClass('LogoRowLeft');
$('#Logo .LogoRow:nth-child(even)').addClass('LogoRowRight');

$('.LogoRow').each(function() {
    var count = 8;
    for(var i = 0; i < count; i++) {
        $(this).append('<span class="LogoTriangle"></span>');
    }
});

的jsfiddle

我在#Logo后面附加了13 LogoRow ，然后在每個LogoRow后面附加了8 LogoTriangle ，但是問題是它應該LogoTriangle不同的方式附加LogoTriangle ，如下所示：

append 8 `LogoTriangle` to `LogoRow` nth child 1
append 7 `LogoTriangle` to `LogoRow` nth child 2 and 3
append 6 `LogoTriangle` to `LogoRow` nth child 4 and 5
append 5 `LogoTriangle` to `LogoRow` nth child 6 and 7
append 4 `LogoTriangle` to `LogoRow` nth child 8 and 9
append 3 `LogoTriangle` to `LogoRow` nth child 10 and 11
append 2 `LogoTriangle` to `LogoRow` nth child 12 and 13
append 1 `LogoTriangle` to `LogoRow` nth child 14 and 15

但我不知道如何將元素附加到這樣的另一個元素。 有什么建議嗎？

Answer 1

將初始count設置為15 ，以獲得完整的三角形。

將count = 8移到循環外，並更改條件以減小該值，如下所示。

count = 8;
$('.LogoRow').each(function(k) {
  console.log(count);
  for (var i = 0; i < count; i++) {
    $(this).append('<span class="LogoTriangle"></span>');
  }
  if (k == 0 || (k > 0 && k % 2 == 0))
    count--;
});

DEMO

Answer 2

或者，您可以通過不是那么簡單但易於理解的方式來做到這一點：

var count = 15;
var n = 0;

for(var i = 0; i < count; i++){
n++;
$('<div class="LogoRow" id="LogoRow-'+n+'"></div>').appendTo('#Logo');
}

$('#Logo .LogoRow:nth-child(odd)').addClass('LogoRowLeft');
$('#Logo .LogoRow:nth-child(even)').addClass('LogoRowRight');

var appends = {
  1: 8,  2: 7,  3: 7,  4: 6,  5: 6,  6: 5,  7: 5,  
  8: 4,  9: 4,  10: 3,  11: 3,  12: 2,  13: 2,
  14: 1,  15: 1,
};
for(var i in appends){
if(appends.hasOwnProperty(i)){
console.log(i, appends[i]);
    for(var j = 0; j < appends[i]; j++){        
      $('#LogoRow-' + i).append('<span class="LogoTriangle"></span>');
    }
  }
}

https://jsfiddle.net/czc6bhgw/8/