CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pedram
Pedram

Reputation: 16575

Append element to each div in order

Well, I'm trying to make a logo with css and html and here is the output:

jsFiddle

now I want to make this with jquery and create all div dynamically. this is what I have done so far:

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 appended 13 LogoRow to #Logo then 8 LogoTriangle to each LogoRow but the problem is it should append LogoTriangle differently, like this:

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

but i have no idea how can i append an element to another element like this. any suggest?

Upvotes: 2

Views: 120

Answers (2)

AxelPAL
AxelPAL

Reputation: 1027

Or you can do it by not that simple, but easy to understand way:

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/

Upvotes: 1

rrk
rrk

Reputation: 15846

Set the initial count to 15 in order to get the full triangle.

Move the count = 8 outside the loop and change the condition to decrease the value like following.

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

Upvotes: 3

Related Questions