Question

我尝试在过去几天尽可能地搜索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，看起来它在后端工作正常，只是没有正确显示。

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

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

Answer 2

您可以使用jQuery的each遍历容器内的div。 index此处代表您当前正在使用的div的索引。

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

的jsfiddle：

http://jsfiddle.net/LwKC6/1

Answer 3

如果你不需要支持IE8，你可以使用CSS的:nth-child伪选择器来区分每个元素的样式。但是，既然你要求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>

为了保持项目的开放，你可能会做类似的事情：

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

Answer 4

稍微解析一下你的代码：

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

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

在上面一行中，您将重新选择父级为container的所有div元素。这是一个包罗万象的变化，并且失败了for循环的目的。您应该使用以下内容获取所有元素：

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


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

Answer 5

虽然比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);
    }
}

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

5 个答案: