javascript - 使用循环将不同的样式应用于元素

Question

在过去的几天里，我尽可能地尝试在 stackoverflow 上搜索我的问题的答案。我不是很精通 JS/jQuery，所以我的答案可能确实存在，但我没有搜索合适的术语，所以如果我碰巧创建了一个重复的主题，我会提前道歉，所以如果有人可以指导我到我的答案的适当位置，将不胜感激。

无论如何，请回答我的问题。

我正在尝试计算一个 div 中的元素数量。在我计算出该 div 中有多少元素之后，我想根据它们在容器中的位置对这些元素应用不同的样式/条件。我最终想将其应用于 Accordion ，默认情况下保持前几个打开，其余关闭。我认为从小处着手改变一些元素的颜色将是学习如何使用循环的正确方法。执行此操作的方法可能已经存在，我不完全确定。

下面是我如何尝试执行此操作的粗略示例。请记住，我对此非常陌生，所以我会以最糟糕的方式进行此操作

<style>
    .green {
        background: green;
    }

    .blue {
        background: blue;
    }
</style>

<script type="text/javascript">
$(document).ready(function(){
    var count = $(".container > div").length;

    for (var i = 1; i <= count; i++) {
        if (i <= 3) {
            console.log(i  + "green");
                $(".container div").addClass("green");
        }
        else {
            console.log(i  + "blue");
            $(".accordion .item h1").addClass("blue");
        }
    }
});
</script>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

我感觉问题可能出在我执行这个的时候。容器全部变成蓝色，如果我移除其他容器，它们都会变成绿色。如果我输入 console.log，它看起来在后端正常工作，只是没有正确显示。

谢谢，我们将不胜感激。期待了解我做错了什么。

Answer 1

使用eq()选择器

var count = $(".container > div").length;

for (i = 1; i <= count; i++) {
      if (i <= 3) {
          console.log(i  + "green");
          $(".container div").eq(i-1).addClass("green");
      }
      else {
          console.log(i  + "blue");
          $(".accordion .item h1").addClass("blue");
      }
}