CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2554813
user2554813

Reputation: 73

Applying different styles to elements using a loop

I tried searching stackoverflow as best as I could for the past few days for the answer to my question. I am not very well versed in JS/jQuery so it is possible that my answer does exist here but I am not searching the proper terms, so I do apologize in advance if I happened to create a repeated topic, so if anyone can direct me to the proper place for my answer it would be much appreciated.

Anyways, onto my question.

I am attempting to count the amount of items in a div. After I get the count of how many items are in that div, I want to apply different styles/conditions to those elements depending on how far down in the container they are. I eventually want to apply this to accordions, keeping the top few open by default and the rest closed. I figured starting small with changing the colors of some elements would be right right way to go to learn how to use loops in general. A method to do this might already exist, I'm not entirely sure.

A rough example of how I am trying to do this is below. Keep in mind that I am extremely new to this so I am be doing this in the worst way possible

<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>

I feel like the problem might be in when I am executing this. The containers go all blue, if I remove the else, they all go green. If I throw in a console.log it looks like it is working properly on the backend, just not displaying correctly.

Thanks, any and all help would be appreciated. Looking forward to learn what I am doing wrong.

Upvotes: 2

Views: 1120

Answers (5)

enhzflep
enhzflep

Reputation: 13109

While rather more verbose than a jQuery solution, I find plain JS far easier to read, and especially for those new to JS, much easier to understand.

I've replaced the js you have with the following:

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

Upvotes: 0

Mutahhir
Mutahhir

Reputation: 3832

Dissecting your code a bit:

On line 7 of your javascript code, you have the following line:

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

In the above line, you're re-selecting all div elements with a parent having class container. This is an all encompassing change, and defeats the purpose of the for loop. You should get all the elements using something like:

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


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

Upvotes: 0

sbonkosky
sbonkosky

Reputation: 2557

You can loop over the divs inside the container using jQuery's each. index here represents the index of the div you're currently working with.

$(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

Upvotes: 2

Amit Soni
Amit Soni

Reputation: 1427

Use eq() selector

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

Upvotes: 3

Jeff
Jeff

Reputation: 14279

If you dont need to support IE8, you could just use CSS's :nth-child pseudo-selector to style each element differently. However, since you asked for a jQuery solution...

I would add a unique class to each div and then use that class to do all the heavy lifting on styles.

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

This would result in...

<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>

And to keep the items open, you would probably do something like:

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

Upvotes: 0

Related Questions