Looping through objects in an array JS

Question

I'm putting together this script which pulls two child elements from a containing div #mini_ads, adds them to an array. I want to be able to use the array to select them via index in order to manip. them individually.

I know I can just select them w/o even using an array of course, but I want this array as I may add multiple more elements later.

The issue is that I am not able to select the items individually by their index in the array. The current script I've got going is selecting and manipulating both objects in the array as if they're both index[0].

var miniAds = $('#mini_ads');
var elements = miniAds.children();
var changeWtime;
var adsArr = new Array();
var i = 0;
var x = 0;
adsArr.push(elements);
console.log(adsArr);
adsArr[i].css("display", "none");   
var changeWtime = setInterval(function () {
    for (x; x < 1; x++) {
        return x;
        while (x > i) {
            adsArr[1].css("display", "block");
        }
    };
}, 5000);
console.log(x);
changeWtime;

I am not sure where I'm going wrong here. Assistance will be much appreciated. Thanks in advance.

Your array only has one entry, which is a jQuery object with the DOM elements. I.e. adsArr[0] indeed refers to both elements (the jQuery object). In your code elements is a jQuery object and adsArr.push(elements) adds that object to the array. — Felix Kling
– Felix Kling, Commented Sep 25, 2013 at 6:04
For your question. the main issue is that you insert an array to array. adsArr.push(elements); elements is an array. — Dvir
– Dvir, Commented Sep 25, 2013 at 6:16

hitautodestruct · Accepted Answer · 2013-09-25 10:13:30Z

3

Issues with your code

You're creating a double array when you push elements into 'adsArr':
```
adsArr.push(elements);
```
You're throwing a return statement in the for loop:
```
for (x; x < 1; x++ ){
    return x;
    // ...
```
You have a double loop for no reason while inside of the for.

Solution

I was going to explain the solution to this verbally, but after coding an example I realized that there is too much to explain this is another solution similar to yours:

var miniAds = $('#mini_ads'),
    elements = miniAds.children(),
    i = 2,
    x = 0;

elements.hide();

var changeWtime = setInterval(function () {
  if ( x < i ) {
      $(elements[x]).show();
  }

  x++;
}, 5000);

Link to example on jsbin.

edited Sep 25, 2013 at 10:13

answered Sep 25, 2013 at 6:10

hitautodestruct

21.1k15 gold badges76 silver badges96 bronze badges

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

10 Comments

Kald Over a year ago

This is quite helpful as well as simplifies things, however, something is still not quite there. It seems the elements are not being captured.

Kald Over a year ago

Correction: it pulls the elements fine into an array(elements). However, the selector within the if statement is not triggering to show.

Kald Over a year ago

Nvm, forgot to call the interval function

Kald Over a year ago

Hmm... it seems there is an issue still due to using a legacy version of jQuery. This works on current jQuery. Thanks.

hitautodestruct Over a year ago

@KALD You shouldn't have any issues with legacy jQuery. $(element) and .children() are supported since jQuery v1.0.

|

codebreaker · Accepted Answer · 2013-09-25 06:09:38Z

1

Hi u should push child divs as below function does and after that i believe u can perform ur task...

var adsArr= [];

$('#mini_ads').children().each(
    function(i){
        adsArr.push(this);
    });

answered Sep 25, 2013 at 6:09

codebreaker

1,4851 gold badge12 silver badges18 bronze badges

Comments

Annie · Accepted Answer · 2013-09-25 06:10:23Z

1

In plain Javascript use .styles()

.css() which is a JQuery method but not Javascript

ref http://www.w3schools.com/js/js_htmldom_css.asp

answered Sep 25, 2013 at 6:10

Annie

811 gold badge1 silver badge3 bronze badges

1 Comment

hitautodestruct Over a year ago

This should be a comment not an answer :)

Collectives™ on Stack Overflow

Looping through objects in an array JS

3 Answers 3

Issues with your code

Solution

Link to example on jsbin.

10 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Issues with your code

Solution

Link to example on jsbin.

10 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related