Javascript 使用循环将不同样式应用于图元

在过去的几天里，我尽可能地搜索stackoverflow，寻找我问题的答案。我不是很精通JS/jQuery，所以我的答案可能确实存在于此，但我没有搜索正确的术语，因此如果我碰巧创建了一个重复的主题，我会提前道歉，因此如果有人能告诉我答案的正确位置，我将不胜感激

不管怎样，请回答我的问题

我正在尝试计算一个div中的项目数量。在计算该div中的项目数量后，我希望根据这些元素在容器中的位置，对它们应用不同的样式/条件。我最终想把这个应用到手风琴上，默认情况下保持顶部的几个打开，其余的关闭。我认为从改变一些元素的颜色开始，是学习如何使用循环的正确方法。这样做的方法可能已经存在，我不完全确定

下面是我如何尝试这样做的一个粗略示例。请记住，我对这一点非常陌生，所以我正在以最糟糕的方式做这件事

<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，它看起来在后端工作正常，只是显示不正确

---

谢谢，任何帮助都将不胜感激。期待了解我做错了什么。

如果您不需要支持IE8，您可以使用CSS的伪选择器对每个元素进行不同的样式设置。但是，由于您要求使用jQuery解决方案

我会为每个div添加一个独特的类，然后使用该类来完成样式的所有繁重工作

$(".container > div").each(function(i) 
{
    $(this).addClass('myclass-' + i)
})

这将导致

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

---

如果您不需要支持IE8，您可以使用CSS的伪选择器来为每个元素设置不同的样式。但是，由于您要求使用jQuery解决方案

我会为每个div添加一个独特的类，然后使用该类来完成样式的所有繁重工作

$(".container > div").each(function(i) 
{
    $(this).addClass('myclass-' + i)
})

这将导致

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

使用选择器

使用选择器

---

可以使用jQuery的each循环容器中的div。这里的索引表示您当前使用的div的索引

$(document).ready(function(){
    $('.container').find('div').each(function(index){
       if(index <= 3)
           $(this).addClass('green');
        else
            $(".accordion .item h1").addClass("blue");
    });
});

JSFiddle：

---

可以使用jQuery的each循环容器中的div。这里的索引表示您当前使用的div的索引

$(document).ready(function(){
    $('.container').find('div').each(function(index){
       if(index <= 3)
           $(this).addClass('green');
        else
            $(".accordion .item h1").addClass("blue");
    });
});

JSFiddle：

---

稍微剖析一下您的代码：

在javascript代码的第7行，您有以下行：

            $(".container div").addClass("green");

在上面的一行中，您正在选择父级具有类容器的所有div元素。这是一个包罗万象的变化，违背了for循环的目的。您应该使用以下方法获取所有元素：

.myclass-0 { height:auto!important; }

var el = $('.container > div'),
    count = el.length;


for () {
   if (i <= 3) {
      el.eq(i).addClass('green');
   } else {
   ...
   }
}

---

稍微剖析一下您的代码：

在javascript代码的第7行，您有以下行：

            $(".container div").addClass("green");

在上面的一行中，您正在选择父级具有类容器的所有div元素。这是一个包罗万象的变化，违背了for循环的目的。您应该使用以下方法获取所有元素：

.myclass-0 { height:auto!important; }

var el = $('.container > div'),
    count = el.length;


for () {
   if (i <= 3) {
      el.eq(i).addClass('green');
   } else {
   ...
   }
}

---

虽然与jQuery解决方案相比更加冗长，但我发现普通JS更容易阅读，尤其是对于那些JS新手来说，更容易理解

我已将您的js替换为以下内容：

window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
    // get the elements with the class attribute = 'container'
    var containerList = document.getElementsByClassName('container');

    // there's only 1 of them, and its the first one, lets grab it
    var container = containerList[0];

    // get the list of div elements contained within the element with a className of 'container'
    var divList = container.getElementsByTagName('div');

    var i, n = divList.length, className;
    for (i=0; i<n; i++)
    {   
        // first 3 will be 'green'
        if (i<3)
            className = 'green';
        // all others will be 'blue'
        else
            className = 'blue';

        // display the current index and chosen className
        console.log(i + ". " + className);

        // add the chosen class to the list of classes that this element has.
        divList[i].classList.add(className);
    }
}

---

虽然与jQuery解决方案相比更加冗长，但我发现普通JS更容易阅读，尤其是对于那些JS新手来说，更容易理解

我已将您的js替换为以下内容：

window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
    // get the elements with the class attribute = 'container'
    var containerList = document.getElementsByClassName('container');

    // there's only 1 of them, and its the first one, lets grab it
    var container = containerList[0];

    // get the list of div elements contained within the element with a className of 'container'
    var divList = container.getElementsByTagName('div');

    var i, n = divList.length, className;
    for (i=0; i<n; i++)
    {   
        // first 3 will be 'green'
        if (i<3)
            className = 'green';
        // all others will be 'blue'
        else
            className = 'blue';

        // display the current index and chosen className
        console.log(i + ". " + className);

        // add the chosen class to the list of classes that this element has.
        divList[i].classList.add(className);
    }
}

---

看起来你可以在第n个子选择器中使用纯CSS，但是如果你只是想练习javascript，这取决于你。你是说你看到所有的div都有一段时间是蓝色背景吗？好吧，我看到的都是蓝色背景，如果我删除脚本，我看不到背景，如果我删除其他所有我看到的都是绿色背景。看起来你可以使用纯CSS作为第n个子选择器，但是如果你只是想练习javascript，这取决于你。你是说你看到所有的div都有一段时间是蓝色的黑底吗？嗯，我看到的都是蓝色背景，如果我删除脚本，我看不到背景，如果我删除其他脚本，我看到的都是绿色背景。它应该是eqi-1，因为OP使用1作为计数器I的起始值。@KingKing Yes，已编辑。谢谢：应该是eqi-1，因为OP使用1作为计数器i的起始值。@KingKing Yes，已编辑。谢谢：