将元素按顺序附加到每个div

Pedram 发表于 Dev

皮德拉姆

好吧，我正在尝试使用css和制作徽标，html这是输出：

现在，我要使用它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

我在每个后面都附加了13LogoRow到#Logo8 LogoTriangle，LogoRow但是问题是它应该以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

但是我不知道如何将一个元素附加到这样的另一个元素。有什么建议吗？

设置初始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--;
});

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。