我正在制作斐波那契螺旋。下面的代码。我需要创建螺旋的第二层(螺旋是由一系列嵌套的div组成的),并且正在使用for循环创建多层。我需要使用.item-one类更改文件中第一个div元素的高度,而没有使用.item-one类更改后续div的高度。
我如何只选择第一个,同时还要记住还有另外四个带有.item-class类的div元素,它们也都是其父母的第一个孩子,仅使用CSS和vanilla JS?(我需要更改第一个div的高度,并需要将所有其他.item-one div的高度更改为其他高度。)
我尝试过:first-child和:first-of-type,但是所有.item-one元素都是其各自父母的第一个孩子,所以:first-child和:first-of-type都选择所有.item一个元素,而不仅仅是页面上的第一个元素。该帖子选择了同一类的第一个元素,但是解决方案选择了所有第一个子元素,而我只想选择该类的文件中的第一个div。
的HTML
<div class="item-one">
<div class="item-two">
<div class="item-three">
<div class="item-four"></div>
</div>
</div>
</div>
JS
window.addEventListener('load', function() {
var $items = document.getElementsByTagName("div");
var $item = $items[0];
var $cloned_item = $item.cloneNode(true);
var $final_item = $items[$items.length - 1];
for (var i = 1; i <= 5; i++) {
$final_item.appendChild($cloned_item);
$final_item = $items[$items.length - 1];
$cloned_item = $item.cloneNode(true);
}
});
最终结果看起来像这样。
<div class="item-one">
<div class="item-two">
<div class="item-three">
<div class="item-four">
<div class="item-one">
<div class="item-two">
<div class="item-three">
<div class="item-four">
<div class="item-one">
<div class="item-two">
<div class="item-three">
<div class="item-four">...and so on...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
您必须使用父级才能选出第一个子级元素。在这种情况下,我使用了body,但是如果您有不同的父母,则可以使用它。
body > .item-one {
border: 1px solid red;
}
<div class="item-one">
<div class="item-two">
<div class="item-three">
<div class="item-four">
<div class="item-one">
<div class="item-two">
<div class="item-three">
<div class="item-four">
<div class="item-one">
<div class="item-two">
<div class="item-three">
<div class="item-four">...and so on...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
或者更好的办法是给该外部div另一个类,如果可以的话使用它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句