Anfügen Element jedes div um

Question

Nun, ich versuche, ein Logo mit css und html zu machen und hier ist die Ausgabe:

jsFiddle

jetzt möchte ich dies mit jquery machen und Erstellen Sie alle div dynamisch. das ist, was ich bisher getan haben:

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

I 13 beigefügten LogoRow-#Logo dann 8 LogoTriangle zu jedem LogoRow aber das Problem ist es LogoTriangle anders, wie diese anhängen soll:

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 

aber ich habe keine Ahnung, wie ich ein Element an ein anderes Element wie dieses anhängen kann. irgendwelche vorschlagen?

Answer 1

Setzen Sie die ursprüngliche count auf 15, um das vollständige Dreieck zu erhalten.

Verschieben Sie die count = 8 außerhalb der Schleife und ändern Sie die Bedingung, um den Wert wie folgt zu verringern.

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

Oder Sie können es tun, indem sie nicht so einfach, aber leicht verständlich:

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/