[英]Append element to each div in order
Well, I'm trying to make a logo with css
and html
and here is the output: 好吧,我正在尝试使用
css
和html
制作徽标,这是输出:
now I want to make this with jquery
and create all div
dynamically. 现在我想用
jquery
并动态创建所有div
。 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>');
}
});
I appended 13 LogoRow
to #Logo
then 8 LogoTriangle
to each LogoRow
but the problem is it should append LogoTriangle
differently, like this: 我在
#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
but i have no idea how can i append an element to another element like this. 但我不知道如何将元素附加到这样的另一个元素。 any suggest?
有什么建议吗?
Set the initial count
to 15
in order to get the full triangle. 将初始
count
设置为15
,以获得完整的三角形。
Move the count = 8
outside the loop and change the condition to decrease the value like following. 将
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--;
});
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/ https://jsfiddle.net/czc6bhgw/8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.