Encadenando funciones en jQuery. No puedo encontrar una explicación en cualquier parte

StackOverflow https://stackoverflow.com/questions/2541924

  •  23-09-2019
  •  | 
  •  

Pregunta

No tengo idea de cómo hacer esto.

Mi marcado:

<table>
    <tr>
        <td id="colLeft">
            Lorem ipsum dolor<br/>
            Lorem ipsum dolor<br/>
            Lorem ipsum dolor<br/>
            Lorem ipsum dolor<br/>
            Lorem ipsum dolor<br/>
            Lorem ipsum dolor.
        </td>
        <td id="colRight">
            <div>1</div>
            <div>2</div>
        </td>
    </tr>
</table>

$(document).ready(function() {
    $('#colRight > div').each(function() { // I try to: select all divs in #colRight
        $(this).height(function(){ // I try to: sets the height of each div to:
            $('#colLeft').height() / $('#colRight > div').length(); // the height of #colLeft divided by the number of divs in colRight.  
        });
    });     
});

Lo que estoy tratando de hacer es cambiar la altura de cada div a la altura de #colLeft dividido por el número de divs en #colRight.

Sin embargo, no funciona.

Nunca he entendido cómo funciona la cadena, y nunca he encontrado a nadie que me enseñe.

Así que me gustaría hacer dos favores de usted.

  1. ¿Por qué doesnt mi código jQuery arriba.
  2. ¿Alguien sabe de un tutorial que explica que sea más detallada que en los tutoriales en la página web de jQuery?

Gracias por su tiempo.

Saludos cordiales, España Marius

¿Fue útil?

Solución

En cuanto al encadenamiento, me gustaría que este peligro: no asuma siempre se puede ciegamente cadena. La mayor parte del núcleo de jQuery y la cadena materia será jQuery UI sin ningún problema, pero algunos módulos de terceros no volverá objetos jQuery (que es lo que el retorno de jQuery libs).

Lo básico es como sigue:

$ (selector de algunos) es una llamada a la función que tiene un valor de retorno de jQueryObject [], así:

/* in "pretend land" because this isn't accurate */
public jQueryObject[] $( some selector ) {
  /* do some magic here with some selector */
  return jQueryObject[];
}

y porque usted está volviendo un jQueryObject [] entonces se puede sustituir en otro lugar. Pero la magia de encadenamiento dice "lo que yo estoy unido a por un periodo de mi uso me como entrada izquierda". Por lo tanto, si tuviéramos:

int a = 20;

y una función de este modo:

public int Doubler(int someInt) {
  return ( someInt * 2 );
}

entonces podríamos cadena como así:

a.Doubler();

y obtener 40. Pero si tuviéramos que:

a.Doubler().Doubler();

entonces habría encadenado dos veces y nuestro resultado sería 80;

Pero a veces los verás en el que también aceptan opciones, que no voy a entrar. Querías los conceptos básicos sobre cómo encadenar las obras, por lo que voy a asumir que el material más avanzado que puede buscar más adelante. Tales como la lectura de la fuente no min.

Ahora, mi salvedad anterior era que las bibliotecas a veces para jQuery devolverán un objeto a sí mismos y el objeto dentro de la biblioteca no se garantiza que sea un jQueryObject [] (para usar mi propia nomenclatura de nuevo). Por lo que está fuera del alcance del encadenamiento. Todas las bibliotecas le dirá lo que un objeto se vuelve, si se trata de un int, String, Object, jQuery o lo que sea.

Así, por ejemplo, en el .height página jQuery () , en la barra de abajo azul la página que se ve: .height () Devuelve: Entero, pero más abajo en la página: hoja de Altura (valor) Devuelve: jQuery y en el href="http://api.jquery.com/each/" rel="nofollow noreferrer"> each () página

Así se puede ver cómo los escritores de documentación API le dicen lo que se volvió de cada función. Así es como se puede saber cuál es el siguiente objeto tomará en al encadenamiento. Es por eso que a veces no se puede encadenar ciertas cosas juntas.

Ok, eso es un montón de información en un solo golpe, pero que quería que el rápido y sucio y si eso no le trae hasta velocidad no sé qué lo hará.

tl; dr: Lo siento por la pared del texto, pero es una parte contigua de respuesta. Ya quiero saber, volver atrás y lo leyó.

Otros consejos

Yo abordaré la pregunta # 1, los ¿Por qué , por lo que muchos tutoriales por ahí que no estoy seguro de qué es lo mejor. Su visión de conjunto de encadenamiento no está muy lejos, sólo necesita un pequeño ajuste en esta línea:

$('#colLeft').height() / $('#colRight > div').length();

Es necesario añadir un retorno, y llamar a .length no como una función, por ejemplo:

return $('#colLeft').height() / $('#colRight > div').length;

Una función necesita return algo (en este caso!), Y .length es una propiedad (de la matriz de objetos dentro del objeto jQuery). Sin embargo, en este caso, véase la respuesta de Cletus, que es una solución mucho mejor en general para establecer la altura como usted desee.

No estoy seguro de echar un vistazo a su código por lo que no está funcionando, pero esta es una manera mucho más sencilla de lograr lo mismo:

$(function() {
  var divs = $("#colRight > div");
  var height = $("#colLeft").height() / divs.length;
  divs.height(height);
});

No hay nada mágico sobre el encadenamiento de funciones en jQuery. Por cierto, cuando la gente dice "encadenamiento" Ellos llamadas medias como:

$("div").css("background", "yellow").addClass("foo");

Lo único que se necesita saber para entender que es que más métodos jQuery devolver el objeto jQuery por lo que es equivalente a:

var div = $("div");
div.css("background", "yellow");
div.addClass("foo");

La función que se pasa a height() debe devolver un valor. Pruebe esto en su código interno:

    $(this).height(function(){ 
        return $('#colLeft').height() / $('#colRight > div').length(); 
    });

En cuanto a encadenar, que en realidad no entran en juego en su código de seguridad. Básicamente, la mayoría de las funciones de jQuery devuelven el objeto que acaba actuado sobre. Así, por ejemplo, si se establece la altura de un objeto, se devuelve dicho objeto. En lugar de esto:

$('#someid').height(300);
$('#someid').click(functionName);

Usted puede hacer esto:

$('#someid').height(300).click(functionName);

Así que los dos divs deben ser cada una la misma altura que la lista de la izquierda? En otras palabras:

-      --
-      --
-      --
-      --
       +
       +
       +
       +

debido a que no se ve bien. Por supuesto, estoy usando cuadro de las formas simplistas para ilustrar un punto, pero quiero estar seguro. Parece que se quiere tener:

-      --
-      --
-      +
-      +

Y así, probablemente aspirar a (pero no he probado esto en un navegador por el momento:

$(document).ready(function() {
  /* it should already apply the height to "each" so you don't have to do that */
  $('#colRight > div').height( 
     /* I give the line it's own parens so I can make sure the grouping is correct */
     ( $('#colLeft').height() / $('#colRight > div').length() ) 
                           ); 
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top