当每个使用相同类的后续元素也是第一个孩子时,如何使用特定类选择页面上的第一个元素?

詹姆斯·霍恩

我正在制作斐波那契螺旋。下面的代码。我需要创建螺旋的第二层(螺旋是由一系列嵌套的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>
abney317

您必须使用父级才能选出第一个子级元素。在这种情况下,我使用了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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使此Javascript的作用超出页面上同类内容的第一个元素?

如何通过使用子元素的ID选择父对象的第一个孩子?

如何在Beautiful Soup中选择列表中每个元素的第一个孩子

使用jQuery查找元素的第一个动态类的每个第一个实例

选择第一个孩子的元素

如何使用jQuery选择每个组中的第一个元素?

如何使用js删除或重命名具有相同类的多元素的第一个元素?

我如何使用 Observable 中的第一个也是最少的元素?

如何使用CSS选择所有元素中第一个出现的类

如何使用XPath选择具有特定属性的第一个元素

如何:悬停,但:不为元素的:第一个孩子?

如何使用linq选择一个孩子的第一个孩子?

如何删除每个元素的第一个元素

如何选择特定的第一个孩子

使用第一个孩子选择具有特定类的表行

XSLT仅每个选择第一个元素

选择相同类别的第一个元素

选择除最后一个孩子以外的每个孩子,但如果最后一个孩子是第一个也是唯一的孩子,则选择它

如何使用map()删除第一个元素

如何仅选择第二个li元素的第一个孩子

如何在第一个孩子中选择第一个孩子

在整个页面上显示第一个特定元素

第一个孩子的选择

如何使用Javascript / Jquery为每个唯一属性值选择第一个匹配的元素?

使用纯CSS隐藏除元素的第一个孩子之外的所有孩子

如何只选择某个班级的第一个元素,而不是大孩子

如何通过:not()使用CSS的第一个孩子

如何使用jQuery选择使用for循环元素创建的第一个单选按钮

将元素添加为第一个孩子