map()get()混乱

Question

我只是通过jQuery API,我对map()&get()方法有点困惑.我知道我错了,但这个map()方法看起来很像一个.each()陈述？除了文档说它返回一个新的jQuery对象.

我一直在玩jsfiddle试图让我的头围绕它,但我不是那里. 这是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();
});

我看到他们正在使用原型扩展jQuery来创建一个名为的函数equalizeHeights().并$(this)表示页面上所有"div"元素的选择器.在map()通过每个项目的通话迭代的div的数组中,并返回其高度？但我感到困惑的是我正在登录控制台.一个是一个object,另一个是array？

有人可以详细说明这段代码中的内容map()和内容get()吗？

提前致谢.

Answer 1

基本面

有两种不同的jQuery map()函数:.map()和$.map().他们执行类似的事情,但在不同的集合.您正在使用第一个表单,它执行以下操作:

1. 迭代调用函数的jQuery对象(集合,等等).在这种情况下,$(this)这就是.equalizeHeights()调用函数的任何东西......这是$('div'):<div>页面上的所有元素(phew).

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

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

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

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

你还在听我说吗？

jQuery obects是类似数组的,但它们不是数组!在调用.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()调用它们.这样,您可以看到整个对象图,其所有属性等.

任何问题？评论.

Answer 2

map循环遍历jQuery对象并将函数应用于每个元素.每个调用的返回值都会添加到数组中.然后将该数组包装到jQuery对象中并返回.

get返回一个包含jQuery对象中每个元素的数组.这意味着它基本上解开了返回的选择map并获得了一个普通的JS数组.

在您的示例中,map创建一个包含每个元素高度的选择.然后调用get它,以便本机JS函数Math.max可以理解它. this.height()然后将选择中每个元素的高度设置为数组中的最大值.