Chaining Funktionen in jQuery. Ich kann keine Erklärung finden überall

Question

Ich habe keine Ahnung, wie dies zu tun.

Meine Markup:

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

Was ich versuche zu tun, um die Höhe jedes div der Höhe von #colLeft durch die Anzahl der divs in #colRight geteilt zu ändern.

Doch es funktioniert nicht.

Ich habe nie verstanden, wie man Kettenfunktionen und fand nie jemand mich zu unterrichten.

Also ich möchte zwei Gefallen von Ihnen fragen.

1. Warum über jQuery-Code tut.
2. Kennt jemand ein Tutorial, das es detaillierter als in den Tutorials auf der jQuery-Website erklärt?

Vielen Dank für Ihre Zeit.

Mit freundlichen Grüßen, Moinat.net Marius

Answer 1

Wie für die Verkettungs, würde ich Sie riskieren Sie: Gehen Sie nicht davon kann man immer blind Kette. Die meisten der Kern jQuery und jQuery UI Zeug wird Kette ohne Probleme, aber einige Module von Drittanbietern werden nicht zurückkehren jQuery-Objekte (das ist, was die jQuery-Libs zurück).

Die Grundlagen sind wie folgt aus:

$ (einige Wähler) ist ein Funktionsaufruf, der einen Rückgabewert von jQueryObject hat [] wie folgt:

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

und weil Sie Rückkehr ein jQueryObject [], dann können Sie es woanders ersetzen. Aber die Magie der Verkettungs sagt „was ich verbunden bin, um von einem Punkt auf meiner linken I zur Verwendung als Eingang“. Also, wenn wir hatten:

int a = 20;

und eine Funktion wie folgt:

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

dann könnten wir Kette wie so:

a.Doubler();

und erhalten 40. Aber wenn wir an:

a.Doubler().Doubler();

dann würden wir zweimal gekettet haben und unser Ergebnis wäre 80;

Aber manchmal werden Sie sie sehen, wo sie auch Optionen akzeptieren, die ich nicht in gehen wird. Sie wollten die Grundlagen, wie funktioniert Chaining, so werde ich die fortgeschrittenere Sachen annimmt, dass Sie später nachschlagen können. Wie die nicht-min Quelle zu lesen.

Nun war mein früherer Vorbehalt, dass manchmal Bibliotheken für jQuery werden ein Objekt zu ihnen zurückkehren und das Objekt in der Bibliothek ist garantiert kein jQueryObject [] sein (meine eigene Nomenklatur wieder zu verwenden). Das ist also nicht in den Anwendungsbereich des Verkettungs. Alle Bibliotheken werden Ihnen sagen, was ein Objekt zurückgibt, ob es ein int, string, Objekt, jQuery oder was auch immer.

So zum Beispiel bei der jQuery .height () Seite, in der blauen Leiste unten die Seite, die Sie sehen: .height () Rückgabewert: Integer, aber weiter unten auf der Seite: .height (Wert) Returns: jQuery und auf der .each () Seite auf dem blauen Balken sehen wir: .each (function ( Index, Element)) Returns: jQuery

So können Sie sehen, wie die API-Dokumentation Autoren sagen, was von jeder Funktion zurückgegeben wird. Das ist, wie kann man wissen, was das nächste Objekt in auf Verkettungsstattfinden wird. Deshalb manchmal Sie bestimmte Dinge nicht Kette zusammen.

Ok, das ist eine Menge von Informationen, die in einem Schlag, aber man wollte die schnell und schmutzig, und wenn das nicht Sie auf Geschwindigkeit bringt Ich weiß nicht, was wird.

tl; dr: sorry für die Wand des Textes, aber es ist eine zusammenhängende Stück Antwort. Ya wollen wissen, gehen Sie zurück und lesen Sie es.

Answer 2

Ich werde angehen Frage # 1, die Warum , so viele Tutorials gibt ich bin nicht sicher, was am besten ist. Ihre Gesamtansicht Chaining ist nicht weit weg, braucht nur ein wenig Anpassung auf dieser Linie:

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

Sie müssen eine Rückkehr an, und rufen Sie .length nicht als Funktion, wie diese:

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

Eine Funktion muss return etwas (in diesem Fall!), Und .length ist eine Eigenschaft (des Objekts Array innerhalb des Jquery-Objekt). Doch in diesem Fall sieht cletus Antwort, es ist eine viel bessere Gesamtlösung die Höhe einzustellen, wie Sie wollen.

Answer 3

Ich bin sicher nicht aus auf dem Code Blick, warum es nicht funktioniert, aber das ist ein viel einfacher Weg, um die gleiche Sache zu erreichen:

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

Es gibt nichts Magisches an Funktionen in jQuery verketten. By the way, wenn die Leute sagen "Chaining" sie bedeuten Anrufe wie:

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

Das einzige, was Sie wissen müssen, dass zu verstehen ist, dass die meisten jQuery-Methoden gibt das jQuery-Objekt so ist es gleichbedeutend mit:

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

Answer 4

Die Funktion, die Sie height() passieren muss einen Wert zurückgeben. Versuchen Sie, diese auf Ihrem inneren Code:

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

Wie für die Verkettung, ist es nicht wirklich ins Spiel kommt in Ihrem Code oben. Grundsätzlich zurückkehren meisten jQuery-Funktionen das Objekt einfach beaufschlagt. So zum Beispiel, wenn Sie festgelegt, die Höhe auf einem Objekt, das Objekt zurückgegeben wird. Anstatt dies:

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

Sie können dies tun:

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

Answer 5

So die beiden divs jeweils die gleiche Höhe wie die linke Liste enthalten sein sollte? Mit anderen Worten:

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

, denn das sieht nicht richtig aus. Zugegeben, ich bin mit Formen verein Box um einen Punkt zu illustrieren, aber ich will, sicher machen. Scheinen, wie würden Sie lieber:

-      --
-      --
-      +
-      +

Und ja, würde ich wahrscheinlich für Ziel (aber ich habe diese nur noch in einem Browser nicht versucht:

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