fonctions en enchaînant jQuery. Je ne peux pas trouver une explication partout

Question

Je ne sais pas comment faire.

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, il ne marche pas le travail.

Je ne l'ai jamais compris comment les fonctions de la chaîne, et n'a jamais trouvé personne pour me enseigner.

Je voudrais demander deux faveurs de vous.

1. Pourquoi ne marche pas mon code ci-dessus jQuery.
2. Quelqu'un sait-il d'un tutoriel qui explique plus en détail que dans les tutoriels sur le site jQuery?

Merci pour votre temps.

Cordialement,
Marius

Answer 1

En ce qui concerne l'enchaînement, je vous hasarder ceci: Ne présumez pas que vous pouvez toujours aveuglément la chaîne. La plupart du noyau jQuery et jQuery UI la substance enchaînera sans problème, mais certains modules tiers ne retournera pas des objets jQuery (qui est ce que le retour libs jQuery).

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 que je suis attaché à une période de ma gauche, je l'utilise comme entrée ». 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 avons enchaîné deux fois et notre résultat serait 80;

Mais parfois, vous les verrez où ils acceptent aussi des options, que je ne vais pas aller dans. Vous vouliez les bases sur la façon dont fonctionne enchaînant, donc je vais supposer que les choses plus avancées, vous pouvez rechercher plus tard. Tels que la lecture de la source non-min.

Maintenant, ma mise en garde plus tôt était que, parfois, les bibliothèques pour jQuery retourneront un objet eux-mêmes et l'objet dans la bibliothèque n'est pas garanti d'être un jQueryObject [] (à utiliser à nouveau ma propre nomenclature). Donc, c'est en dehors du champ d'application de l'enchaînement. Toutes les bibliothèques vous diront quel objet retourne, que ce soit un int, string, objet, jQuery ou autre.

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

Vous pouvez voir comment les rédacteurs de documentation de l'API vous dire ce qui est de retour de chaque fonction. Voilà comment vous pouvez savoir ce que l'objet suivant prendra en enchaînant sur. Voilà pourquoi parfois vous ne pouvez pas la chaîne certaines choses ensemble.

Ok, c'est beaucoup d'informations en un seul coup, mais vous vouliez le rapide et sale et si je ne vous apporte pas à la vitesse ne sais pas ce qui va.

tl; dr: désolé pour le mur de texte, mais il est un morceau contigu de réponse. Ya veux savoir, revenir en arrière et lire.

Answer 2

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

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

Vous devez ajouter un retour, et appeler .length pas en fonction, comme ceci:

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

Une fonction doit return quelque chose (dans ce cas!), Et .length est une propriété (du tableau d'objets dans l'objet jquery). Cependant, dans ce cas, voir la réponse de Cletus, il est une bien meilleure solution globale pour régler la hauteur comme vous voulez.

Answer 3

Je ne suis pas sûr de votre code en regardant pourquoi il ne fonctionne pas, mais c'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 enchaînant 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 4

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

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

En ce qui concerne l'enchaînement, il ne vient pas vraiment en jeu dans votre code ci-dessus. Fondamentalement, la plupart des fonctions jQuery renvoient l'objet que vous venez sur agissiez. Ainsi, par exemple si vous définissez la hauteur sur un objet, cet objet est retourné. Au lieu de ceci:

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

Vous pouvez faire ceci:

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

Answer 5

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

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

parce que cela ne regarde pas droit. Accordé, j'utilise des formes de boîte simpliste pour illustrer un point, mais je veux vous assurer. On dirait que vous préférez avoir:

-      --
-      --
-      +
-      +

Et donc, je chercherai probablement (mais je ne l'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() ) 
                           ); 
});