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");
      }
}