javascript - html或js-在页面中创建大量相似的html标签

原文 标签 javascript jquery html css dom

我正在一个页面上工作,在该页面上我需要有一些相似的树(种类),并在它们上面留有很多树,就像跨越页面底部的整个页面宽度一样。我正在考虑用2种方法来做,一种可能是先创建一组(树并离开),然后使用jquery克隆它,另一种可能是基本上在页面本身中为所有它们编写html标签。显然,这将意味着拥有许多html标签。

树组的HTML:

    <div class="tree-group-avg">
            <div class="small-tree">
                <span class="left-leaf"></span>
                <span class="right-leaf"></span>
            </div>
            <div class="avg-tree">
                <span class="left-leaf"></span>
                <span class="right-leaf"></span>
            </div>
            <div class="large-tree">
                <span class="left-leaf"></span>
                <span class="right-leaf"></span>
            </div>            
      </div>

CSS:
.tree-group-avg {margin:0 15px;display:inline-block; }
.tree-group-avg div {position:relative;}
.tree-group-avg .large-tree {background:#83919F; width:2px; height:70px; display:inline-block; margin:0 5px -5px 0}
.tree-group-avg .avg-tree {background:#83919F; width:2px; height:50px; display:inline-block; margin:0 5px -5px 0}
.tree-group-avg .small-tree {background:#83919F; width:2px; height:30px; display:inline-block; margin:0 5px -5px 0} 
.left-leaf {width:10px; height:10px; border-radius:0 10px 0 10px; display:inline-block; background:#ACCF37; position:absolute; left:-10px;}
.right-leaf {width:10px; height:10px; border-radius:10px 0 10px 0; display:inline-block; background:#ACCF37; position:absolute; top:15px;}

我需要注意的是树的高度不同,因此,与较小的树相比,较大的树上可能需要3个叶子。为此,我想到了两种方法,要么直接在html中使用具有不同css“top”属性值的不同叶子,要么通过js或jquery完成整个操作,在其中计算树的高度并修改每个叶子的“top”值。

一组jsfiddle:http://jsfiddle.net/npT47/

所要达到的精确图像:

最佳答案

HTML和JS都不同,不能仅通过编写JS代码片段来创建页面,也不能仅使用HTML来创建Dynamic网页。

您需要将两者融合。

到目前为止,我已经看到了您的提琴演奏和出色的工作。但是我的共同发现是,您在一个共同的间隔之后创建了一个线索,让我们每个说10px。 10像素后,您正在创建新的叶子。高度也是常见的,每棵树的高度几乎增加5px。您可以在JS中使用它们的其他功能,并创建树!

您可以使用JS的for循环并创建树,但在每次循环后仅增加树的大小即可,loop会为您处理。您只需要确定所编写的内容将创建一棵树即可。并注意,将要生长的树将具有常见的大小增加,而叶将以相同的数目int进行增加。

关于javascript - html或js-在页面中创建大量相似的html标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18975586/

相关文章:

javascript - Bluebird 对功能数组的 promise

jquery - 使用JQuery向所有方向扩展div

jquery - jQuery延迟或settime在此

javascript - jQuery onchange检测

javascript - 默认情况下,如何使 bootstrap 多选选项组折叠?

javascript - 使用HTML滑块更改按钮的链接

html - Divs,Float和Align需要一些帮助

javascript - 如何在另一个数组中存储数组的对象元素个数?

javascript - 如何从任意点进行射线广播

javascript - JS:从其他文件调用打印功能