CODEWITHSUNDEEP
javascriptjqueryarraysloopsobject
user3546749
user3546749

Reputation: 63

Trying to use the results from a loop and logging it to the console

I've create a loop to iterate through an array and output the result to the console, but I'm trying to reuse the results from the loop later in the file, but it keeps appearing as undefined in the console and not sure what I am doing wrong? Would someone please give me guidance on the issue. Below is my current code.... Many Thanks in advance!! :)

// GET CLASS NAMES FROM THE HTML PAGE AND PUT IT INTO AN ARRAY
var allClassNames = [];
var finalClassName = "";
$('[class]').each(function(){
  $.each($(this).attr('class').split(' '),function(i,className) {
    if (className.length && $.inArray(className, allClassNames) === -1) {
        allClassNames.push(className);
    }
  });
});

// LOOPING THROUGH THE CLASS NAMES AND OUTPUTTING THE NAMES TO THE CONSOLE
var arr = allClassNames;
for(var i=0; i < arr.length; i++) {
  console.log(arr[i]);
}

// OUTPUT CLASS NAMES AND CSS STYLING TO THE CONSOLE
$("." + allClassNames.join(",.")).each(function(){
    console.log( 'className = .' + arr[i] , [$(this).css(['top', 'left', 'width', 'height'])] );
//                                   ^ WHERE I AM TRYING TO OUTPUT THE INDIVIDUAL RESULTS FROM THE LOOP
});

Upvotes: 2

Views: 108

Answers (4)

mjwunderlich
mjwunderlich

Reputation: 1035

The problem is that at this point:

$("." + allClassNames.join(",.")).each(function(){
    console.log( 'className = .' + arr[i] , [$(this).css(['top', 'left', 'width', 'height'])] );
});

i is equal to arr.length because it's the last value visited in the the for (var i ...) loop above, and so your printing something outside the range of the arr[] array.

To illustrate this:

var arr = [0, 1, 2, 3, 4];
for (var i=0; i<arr.length; ++i) {
  // ...
}
console.log(typeof arr[i] == 'undefined') // this will print true, because at this point i == 5 (arr.length)

However, there is no correlation between the list of classes in arr[] and the elements you find in the DOM by those same class-names, but if what you're looking is to print the class name, then this will work:

$("." + allClassNames.join(",.")).each(function(){
    console.log( 'className = .' + $(this).attr('class') , [$(this).css(['top', 'left', 'width', 'height'])] );
});

Upvotes: 1

vsogrimen
vsogrimen

Reputation: 456

I think you should use the index in your $().each().

Example:

// OUTPUT CLASS NAMES AND CSS STYLING TO THE CONSOLE
$("." + allClassNames.join(",.")).each(function(index){
    console.log( 'className = .' + arr[index] , [$(this).css(['top',   'left', 'width', 'height'])] );
});

Notice the index variable in the anonymous function.

Just make sure to put the index variable in the anonymous function.

.each(function(index){
    console.log(index);
});

I hope this has given you some idea.

Here are some links that i think can help:

http://api.jquery.com/jquery.each/

https://api.jquery.com/each/

Upvotes: 1

Sachin
Sachin

Reputation: 1218

As mentioned by others, you i variable is irrelevant in last loop: you can use this code to solve that:

$("." + allClassNames.join(",.")).each(function(i,v){
    console.log( 'className = .' + arr[i] , [$(v).css(['top', 'left', 'width', 'height'])] );

});

please notice this is now replace by v

Upvotes: 1

rudi Ladeon
rudi Ladeon

Reputation: 693

I think the problem is you are don't declare the variable i in loop each:

$("." + allClassNames.join(",.")).each(function(){
console.log( 'className = .' + arr[i] , [$(this).css(['top', 'left', 'width', 'height'])] );
});

try this :

var i = 0;

$("." + allClassNames.join(",.")).each(function(){
console.log( 'className = .' + arr[i] , [$(this).css(['top', 'left', 'width', 'height'])] );
i++;
});

Upvotes: 1

Related Questions