jquery - map() get() 混淆

Question

我刚刚浏览了 jQuery API，对 map() 和 get() 方法有点困惑。我知道我错了，但是 map() 方法看起来很像 .each() 语句？除了文档说它返回一个新的 jQuery 对象。

我一直在 jsfiddle 上玩这个，试图弄清楚它，但我还不太明白。 here是jsfiddle链接:

这里还有代码片段:

$.fn.equalizeHeights = function() {
    var two = $(this).map(function(i, e) {
                                return $(e).height();
                            });
    console.log(two);
    console.log(two.constructor);
    console.log(two.get());
    console.log(two.get().constructor);
    return this.height(Math.max.apply(this,two.get()));
}
$('input').click(function() {
    $('div').equalizeHeights();
});

我看到他们正在使用原型(prototype)扩展 jQuery，以创建一个名为 equalizeHeights() 的函数。 $(this) 表示页面上所有“div”元素的选择器。 map() 调用会迭代 div 数组中的每个项目并返回其高度？但我感到困惑的是我正在控制台上记录的内容。 一个是对象，另一个是数组？

有人可以详细说明一下 map() 和 get() 在这段代码中做了什么吗？

提前致谢。

Answer 1

基础知识

有两个不同的 jQuery map()功能: .map() ，和 $.map() 。他们执行类似的操作，但针对不同的集合。您使用的是第一个表单，它执行以下操作:

1. 迭代调用该函数的 jQuery 对象(集合，无论什么)。在本例中，即 $(this) ，这就是 .equalizeHeights()函数被调用于...，即 $('div') :全部<div>页面上的元素(唷)。

2. 创建一个数组，其元素数量与 .map() 的对象相同。被调用(记住页面上的所有 div)，其第 n^th 元素是通过调用提供的回调生成的 - 我将在一秒钟内到达那里 - 在第 n^th 上> 目标 jQuery 对象中的元素。在这种特殊情况下，回调就是这个函数:

   function(i, e) { return $(e).height(); }

是的，.map()看起来确实像 .each() ，但有一个关键区别:

• .each()对集合中的每个元素执行操作；传递给 .each() 的回调的返回值用于判断是否继续迭代。
• .map()还对集合中的每个元素执行操作，但回调的返回值用于在 .map() 返回的类数组对象中生成元素。 .

你还在我身边吗？

jQuery 对象类似于数组，但它们不是数组!您调用.get()的原因在 .map() 的末尾调用的目的是将 jQuery 对象转换为真正的数组。该数组的元素是回调返回的值。

把它们放在一起

该函数设置每个<div>的高度页面上最高的高度<div> 。方法如下:

$('input').click(function() {   // bind a click listener to every <input> element
    $('div').equalizeHeights(); // ...that will call the equalizeHeights() fn
                                //    on all <div> elements when fired
});

所以，看看 equalizeHeights() 的内部定义:

$.fn.equalizeHeights = function() {
    // construct an array that contains the height of every <div> element
    var two = $(this).map(function(i, e) {
                                return $(e).height();
                          });


    return this.height(    // set the height of element <div> element to...
        Math.max.apply(    // the largest value in...
            this,two.get() // the array of height values
        )
    ); // ...and finally, return the original jQuery object to enable chaining
}

但是constructor呢？生意？

正如您所发现的，是的，一个是对象(jQuery 对象)，另一个是数组。这就是为什么你需要 .get()调用将类似数组的对象转换为 Math.max()可以理解。

而不是查看constructor属性，您可以使用更多 jQuery 来弄清楚您正在查看的内容:

console.log(two.jquery);         // the version of jquery, something like "1.4.4"
console.log($.isArray(two));     // is it a plain old JS array? false
console.log(two.get().jquery);   // undefined! it's just an array.
console.log($.isArray(two.get()));    // true

更好的是查看调试器内部的实际对象，而不仅仅是 console.log() -他们。这样，您就可以看到整个对象图、其所有属性等。

有任何问题吗？评论离开。