jquery - example - leaflet ajax

mapa() obtener() confusión

Question

Solo estoy revisando la API de jQuery y estoy un poco confundido con el método map() y get() . Sé que estoy equivocado, pero el método map() se parece mucho a una declaración .each() ? Excepto que la documentación dice que devuelve un nuevo objeto jQuery.

He estado jugando con esto en jsfiddle tratando de entenderlo, pero no estoy del todo bien. here está el enlace jsfiddle:

También aquí está el fragmento de código:

$.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();
});

Veo que están extendiendo jQuery usando el prototipo para crear una función llamada equalizeHeights() . Y $(this) representa el selector para todos los elementos ''div'' en la página. ¿La llamada map() itera a través de cada uno de los elementos en la matriz de divs y devuelve su altura? Pero lo que me confunde es lo que estoy registrando en la consola. ¿Uno es un object y el otro es una array ?

¿Alguien podría explicar qué hacen map() y get() en este fragmento de código?

Gracias por adelantado.

Answer 1

Fundamentos

Hay dos funciones diferentes de jQuery map() : .map() y $.map() . Realizan cosas similares, pero sobre diferentes colecciones. Estás utilizando el primer formulario, que hace lo siguiente:

1. Iterar sobre el objeto jQuery (colección, lo que sea) en el que se invocó la función. En este caso, es $(this) , que es lo que sea que se invocó la función .equalizeHeights() en ... que es $(''div'') : todos los elementos <div> en la página (phew).

2. Cree una matriz con el mismo número de elementos que el objeto en el que se invocó .map() (todos los divs en la página, recuerde) cuyo elemento n ^th se genera al invocar la devolución de llamada proporcionada (llegaré en un segundo) en el elemento n ^th en el objeto jQuery objetivo. En este caso particular, esa devolución de llamada es esta función:

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

Sí, .map() se parece a .each() , pero hay una diferencia clave:

• .each() realiza una acción en cada uno de los elementos de la colección; El valor de retorno de la devolución de llamada pasada a .each() se utiliza para determinar si la iteración continúa o no.
• .map() también realiza una acción en cada uno de los elementos de la colección, pero el valor devuelto de la devolución de llamada se utiliza para generar un elemento en el objeto similar a una matriz devuelto por .map() .

¿Sigues conmigo?

Los objetos de jQuery son como matrices, ¡pero no son matrices! La razón por la que llama a .get() al final de la llamada a .map() es para convertir ese objeto jQuery en una verdadera matriz. Los elementos de esa matriz son los valores devueltos por la devolución de llamada.

Poniendolo todo junto

Esta función establece la altura de cada <div> en la página a la altura de la <div> más alta. Así es cómo:

$(''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
});

Entonces, mirando dentro de la definición de 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
}

Pero ¿qué pasa con el negocio del constructor ?

Como descubrió, sí, uno es un objeto (un objeto jQuery) y el otro es una matriz. Es por eso que necesita esa llamada .get() para convertir el objeto similar a una matriz en algo que Math.max() pueda entender.

En lugar de mirar la propiedad del constructor , puedes usar un poco más de jQuery para averiguar qué es lo que estás viendo:

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

Aún mejor es mirar los objetos reales dentro de un depurador, en lugar de solo console.log() -ing ellos. De esa manera, puedes ver el gráfico completo del objeto, todas sus propiedades, etc.

¿Alguna pregunta? Comentar lejos.

Answer 2

Each no parece devolver una matriz resultante, mientras que el map devuelve una matriz que contiene los valores de devolución para todas las devoluciones de llamada.

Get devuelve una matriz de los elementos puros que se envolvieron en objetos de jQuery como se señaló de forma aislada. (corregido)

Answer 3

map bucles a través de un objeto jQuery y aplica una función a cada elemento. El valor de retorno de cada llamada se agrega a una matriz. Esa matriz se envuelve en un objeto jQuery y se devuelve.

get devuelve una matriz que contiene cada elemento en un objeto jQuery. Esto significa que esencialmente desenvuelve la selección devuelta por map y obtiene una matriz JS simple.

En su ejemplo, el map crea una selección que contiene la altura de cada elemento. Luego llama a get para que la función JS nativa Math.max pueda entenderlo. this.height() luego establece la altura de cada elemento en la selección al valor más grande en la matriz.