Javascript whitespace issue

Question

In my container news-variety I got 4 columns, I just want to take all column in to left and animate each column to write.

For that I use the CSS left property.

I wrote the function to get the no. of column, but it adds whites space and display wrongly, in my case I need the i value 0,1,2,3,4 but this function shows 0, 2, 4, 6, 8.

Please help me to remove the whites space and get the i value to 0,1,2,3,4.

This is my code :

var newsVariety = document.getElementById('news-variety');
if(newsVariety){
    var newsColums = newsVariety.childNodes;
    for(i=0;i<newsColums.length;i++){
        if(newsColums[i].className == "column") continue;
        alert(i);
    }
}

Your i values appear not to progress linearly because of the continue statement. If newsColumns[i].classname == 'column", then your alert(i) never gets called. Move it up a line and you'll see a linear progression. Ass for the rest, well, I've no idea what you're asking. — Ryan Ballantyne
– Ryan Ballantyne, Commented Feb 26, 2011 at 8:30

Bryn Keller · Accepted Answer · 2011-02-26 08:34:58Z

1

You're getting whitespace (text) nodes in addition to elements. You could exclude the text nodes like this:

var newsVariety = document.getElementById('news-variety');
    if(newsVariety){
        var newsColums = newsVariety.childNodes;
        for(i=0;i<newsColums.length;i++){
            if(newsColums[i].className == "column") continue;
            if(newsColums[i].nodeType == 3) continue;
            alert(i);
        }
    }

but a better solution would be to use a function (getElementsByTagName) that only gives you elements in the first place, like this:

var newsVariety = document.getElementById('news-variety');
    if(newsVariety){
        var newsColums = newsVariety.getElementsByTagName('whatever-your-element-tag-is');
        for(i=0;i<newsColums.length;i++){
            if(newsColums[i].className == "column") continue;
            alert(i);
        }
    }

answered Feb 26, 2011 at 8:34

Bryn Keller

9896 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

3gwebtrain Over a year ago

i use like this : var newsVariety = document.getElementById('news-variety'); if(newsVariety){ var newsColums = newsVariety.getElementsByTagName('DIV'); for(i=0;i<newsColums.length;i++){ if(newsColums[i].className == "column") continue; newsColums[i].style.left = (i*23) +'%'; } } but not work

3gwebtrain Over a year ago

if i remove this line "if(newsColums[i].className == "column") continue;" then it's works fine. what is wrong?

Bryn Keller Over a year ago

How does it not work? Also, are you sure you want to continue if className == "column"? Aren't the divs with "column" class the ones you actually want to change?

Bryn Keller Over a year ago

The continue statement means "skip all the lines after this one and go through the loop again". So you probably want to remove that "if" and "continue" section.

3gwebtrain Over a year ago

i want to change the div with colum class. as well column div have the siblings and childrens as divs. if i remove the class name then the animation will affect all divs right?

|

HBP · Accepted Answer · 2011-02-26 08:32:44Z

1

You are forgetting that whitespace is represented in the DOM as text elements.

if (newsVariety) {
  var newsColums = newsVariety.childNodes;
    for (col = 0, i = 0; i < newsColums.length; i++) {
      if (newsColums[i].className == "column")
        continue;
        alert (col++);
     }
 }

answered Feb 26, 2011 at 8:32

HBP

16.1k6 gold badges30 silver badges34 bronze badges

Collectives™ on Stack Overflow

Javascript whitespace issue

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related