尝试使用循环的结果并将其记录到控制台答案

【问题标题】：Trying to use the results from a loop and logging it to the console尝试使用循环的结果并将其记录到控制台
【发布时间】：2016-04-16 11:44:23
【问题描述】：

我创建了一个循环来遍历数组并将结果输出到控制台，但我试图在文件的后面重用循环中的结果，但它在控制台中一直显示为未定义而不是确定我做错了什么？有人请给我关于这个问题的指导。以下是我当前的代码....非常感谢提前！ :)

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

【问题讨论】：

在console.log( 'className = .' + arr[i] 这一行中，您可能的意思是从each 函数中获取i，并且您没有在其中传递任何内容。试试写each(function(i,v)

标签： javascript jquery arrays loops object

【解决方案1】：

问题在于此时：

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

i 等于 arr.length，因为它是上面 for (var i ...) 循环中访问的最后一个值，因此您打印的内容超出了 arr[] 数组的范围。

为了说明这一点：

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)

但是，arr[] 中的类列表与您在 DOM 中通过这些相同的类名找到的元素之间没有关联，但如果您正在寻找的是打印类名，那么这将工作：

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

【讨论】：

太好了，您在回答中很好地解释了这个问题。但你的答案在哪里？
@Sachin 正如我在回答中所说，$("." + allClassNames.join(",.")) 将找到的 DOM 元素与 arr[] 的类名数组之间没有关联

【解决方案2】：

我认为问题是你没有在循环中声明变量 i：

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

试试这个：

var i = 0;

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

【讨论】：

【解决方案3】：

正如其他人所提到的，你 i 变量在最后一个循环中是无关紧要的：你可以使用这段代码来解决这个问题：

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

});

请注意this 现已替换为v

【讨论】：

这会产生意想不到的结果，因为这里的i是匹配那些类名的DOM元素的索引，而不是类名数组arr[]

【解决方案4】：

我认为你应该使用$().each() 中的索引。

例子：

// 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'])] );
});

注意匿名函数中的index 变量。

只需确保将index 变量放入匿名函数中即可。

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

我希望这能给你一些想法。

以下是一些我认为可以提供帮助的链接：

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

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

【讨论】：