JavaScript loop is having weird results

Go To


I have the following object:

var r = {
    obj: $(this),
    children: $(this).children(),
    panes: $('.rotatorPane', $(this)),
    tagNames : [],
    captions: [],
    subcaptions: []     

$(this) refers to the following div:

<div class="myRotator">
    <div class="rotatorPane">

    <div class="rotatorPane" id="pane3">


    <img src="img/1.jpg" alt="pane 1" class="rotatorPane" data-caption="Lorem Ipsum" data-subcaption="Dolor sit amet" />


The problem I'm having is with the following loop:

for(pane in r.panes){

The output starts out as expected:


But then I get a bunch of method names as outputs:


Does anyone know why this is happening?

2012-04-04 19:07
by DC_


Don't use for ... in on things that are arrays, or array-like. Use a numeric index variable.

for (var i = 0; i < r.panes.length; ++i) {
  var pane = r.panes[i];
  // ...

The for ... in form is for iterating over the properties of an object — all of them. When you want to iterate through the indexed properties of an array (or, again, something that you're treating as an array), always use a numeric index.

In this case, the array-like object in question is a jQuery object, which has all sorts of properties besides the numerically-indexed properties.

2012-04-04 19:08
by Pointy
for in should only be using when retrieving all the keys for an object. For simple arrays whose prototype hasn't been modified, this mostly works, except that the order of iteration is not guaranteed (specially if you insert items in the middle of the array), so you should really never use it - Juan Mendes 2012-04-04 19:11
Well, yes, but personally I try to shy away from coding practices that "mostly work" when there's a simple alternative that always works. Also, for some code, you never know when its environment might change such that the Array prototype gets some additional iterable properties. Yes, there's the hasOwnProperty() test, but if you're having to go to all that trouble it seems like there's no point - Pointy 2012-04-04 19:14
If you read my comment, you'll see that my point was that even though there is a way that does work, you still shouldn't use it - Juan Mendes 2012-04-04 19:20
Oh OK well I see what you mean. I wasn't so much trying to criticize your statement (which is perfectly true) as to prevent anybody from thinking that for ... in is just "naughty" and not just a really bad idea :- - Pointy 2012-04-04 19:22


you should use the jQuery for each loop i think, as you probably cant use hasOwnProperty due to jquery adding its own methods and stuff to the object

2012-04-04 19:09
by NickSlash