Fonctions de chaînage dans jQuery. Je ne trouve aucune explication nulle part

Question

Je n'ai aucune idée de comment faire cela.

Mon balisage:

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

Ce que je suis en train de faire est de changer la hauteur de chaque div à la hauteur de #colLeft divisé par le nombre de divs dans #colRight.

Cependant, cela ne fonctionne pas.

Je n'ai jamais compris comment chaîner des fonctions, et je n'ai jamais trouvé quelqu'un pour m'apprendre.

Alors je voudrais vous demander deux faveurs.

1. Pourquoi ne pas mon code jQuery ci-dessus.
2. Est-ce que quelqu'un connaît un tutoriel qui l'explique plus en détail que dans les tutoriels sur le site Web jQuery?

Nous vous remercions de votre temps.

Cordialement,
Marius

Answer 1

En ce qui concerne l'enchaînement, je risquez-vous ceci: Ne supposez pas que vous pouvez toujours chaîner aveuglément.La plupart des core jQuery et l'interface utilisateur jQuery seront enchaînés sans problème, mais certains modules tiers ne retourneront pas d'objets jQuery (qui est ce que les librairies jQuery retournent).

Les bases est comme ceci:

$ (certains sélecteur) est un appel de fonction qui a une valeur de retour de jQueryObject [] comme ceci:

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

et parce que vous retournez un jQueryObject [] alors vous pouvez remplacer un autre endroit. Mais la magie de l'enchaînement dit "tout ce à quoi je suis attaché par une période sur ma gauche, je l'utilise comme contribution". Donc, si nous avions:

int a = 20; 

et une fonction comme ceci:

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

alors nous pourrions chaîne comme ainsi:

a.Doubler(); 

et obtenir 40. Mais si nous devions:

a.Doubler().Doubler(); 

alors nous aurions enchaîné deux fois et notre résultat serait 80; Mais parfois, vous les verrez où ils acceptent également des options, que je ne vais pas entrer dans. Vous vouliez les bases sur le fonctionnement du chaînage, donc je vais supposer les choses les plus avancées que vous pouvez rechercher plus tard. Tels que la lecture de la source non-min. Maintenant, mon avertissement précédent était que parfois les bibliothèques pour jQuery renvoient un objet à elles-mêmes et l'objet à l'intérieur de la bibliothèque n'est pas garanti pour être un jQueryObject [] (pour réutiliser ma propre nomenclature). Donc, cela sort du cadre de l'enchaînement. Toutes les bibliothèques vous diront ce qu'un objet renvoie, que ce soit un int, une chaîne, un objet, un jQuery ou autre chose.

Ainsi, par exemple, à la page jQuery .height(), dans la barre bleue en bas de la page que vous voyez: .height() Retourne: Entier mais plus bas la page: .height (valeur) Retourne: jQuery et sur le .each() page, dans la barre bleue nous voyons:.each (function (index, Element)) Retourne: jQuery

Ainsi vous pouvez voir comment les rédacteurs de documentation de l'API vous disent ce qui est renvoyé par chaque fonction. C'est ainsi que vous pouvez savoir quel sera le prochain objet à enchaîner. C'est pourquoi parfois vous ne pouvez pas enchaîner certaines choses ensemble.

Ok, c'est beaucoup d'informations en un coup, mais vous vouliez le rapide et sale et si cela ne vous met pas à jour, je ne sais pas ce que va.

tl; dr: désolé pour le mur de texte, mais c'est un morceau contigu de réponse. Tu veux savoir, reviens le lire.

Answer 2

Je ne suis pas sûr de votre code en regardant pourquoi il ne fonctionne pas, mais cela est une manière beaucoup plus simple de réaliser la même chose:

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

Il n'y a rien de magique dans les fonctions de chaînage dans jQuery. D'ailleurs, quand les gens disent « Enchaînement » ils veulent dire des appels comme:

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

La seule chose que vous devez savoir pour comprendre c'est que plus méthodes jQuery retour l'objet jQuery il est donc équivalent à:

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

Answer 3

La fonction que vous transmettez à height() doit renvoyer une valeur. Essayez ceci sur votre code interne:

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

Quant à enchaînant, il ne vient pas vraiment en jeu dans votre code ci-dessus. Fondamentalement, la plupart des fonctions jQuery renvoient l'objet sur lequel vous venez d'agir. Ainsi, par exemple, si vous définissez la hauteur sur un objet, cet objet est retourné. Au lieu de cela:

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

Vous pouvez faire ceci:

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

Answer 4

Je vais aborder la question n ° 1, le pourquoi, tant de tutoriels là-bas, je ne suis pas sûr ce qui est mieux. Votre vision globale de l'enchaînement n'est pas loin, juste besoin d'un petit ajustement sur cette ligne:

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

Vous devez ajouter un retour, et appelez.longueur non pas en fonction, comme ceci: (! dans ce cas)

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

Une fonction doit return quelque chose, et .length est une propriété (du tableau d'objets dans l'objet jquery). Cependant, dans ce cas, voir la réponse de Cletus, c'est une solution globale beaucoup mieux pour définir la hauteur comme vous le souhaitez.

Answer 5

Ainsi, les deux DIV doivent chacun être la même hauteur que la liste de gauche? En d'autres termes:

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

parce que cela ne semble pas correct. Certes, j'utilise des formes de boîtes simplistes pour illustrer un point, mais je veux m'assurer. On dirait que vous préférez avoir:

-  -- 
-  -- 
-  + 
-  + 

Et donc, je chercherai probablement (mais je n'ai pas essayé dans un navigateur pour l'instant:

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