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.

• Felix Kling: 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.
• Rogue: That while loop will never be reached
• Dvir: For your question. the main issue is that you insert an array to array. adsArr.push(elements); elements is an array.

Answer 1

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.

• Kald: 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: Correction: it pulls the elements fine into an array(elements). However, the selector within the if statement is not triggering to show.
• Kald: Nvm, forgot to call the interval function
• Kald: Hmm... it seems there is an issue still due to using a legacy version of jQuery. This works on current jQuery. Thanks.
• hitautodestruct: @KALD You shouldn't have any issues with legacy jQuery. $(element) and .children() are supported since jQuery v1.0.

Answer 2

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

Answer 3

In plain Javascript use .styles()

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

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

• hitautodestruct: This should be a comment not an answer :)