将元素按顺序追加到每个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/