funzioni di concatenamento in jQuery. Non riesco a trovare una spiegazione da nessuna parte

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

  •  23-09-2019
  •  | 
  •  

Domanda

Non ho idea di come fare questo.

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

Quello che sto cercando di fare è di modificare l'altezza di ogni div all'altezza del #colLeft diviso per il numero di div in #colRight.

Tuttavia, non funziona.

Non ho mai capito come funzioni a catena, e non ho mai trovato nessuno di insegnarmi.

Quindi vorrei chiedere favori due di voi.

  1. Perché pretende molto il mio codice jQuery sopra.
  2. Qualcuno sa di un tutorial che spiega più dettagliata rispetto ai tutorial sul sito di jQuery?

Grazie per il vostro tempo.

Cordiali saluti,
Marius

È stato utile?

Soluzione

Per quanto riguarda il concatenamento, vorrei azzardare questo: Non dare per scontato si può sempre ciecamente catena. La maggior parte del nucleo jQuery e la catena roba volontà jQuery UI senza alcun problema, ma alcuni moduli di terze parti non tornerà oggetti jQuery (che è ciò che restituiscono le librerie jQuery).

I principi fondamentali è come questo:

$ (alcuni selettore) è una chiamata di funzione che ha un valore di ritorno di jQueryObject [] in questo modo:

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

e perché si sta restituendo un jQueryObject [] allora si può sostituire da qualche altra parte. Ma la magia di concatenamento dice "qualunque cosa io sono attaccato ad un periodo alla mia sinistra che uso come input". Quindi, se avessimo:

int a = 20;

e una funzione in questo modo:

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

allora potremmo catena come in tal modo:

a.Doubler();

e ottenere 40. Ma se dovessimo:

a.Doubler().Doubler();

allora avremmo incatenato due volte e il nostro risultato sarebbe 80;

Ma a volte li vedrete in cui accettano anche opzioni, che io non ho intenzione di andare in. Volevi le nozioni di base su come funziona concatenamento, quindi darò per scontato le cose più avanzata si può cercare in seguito. Come ad esempio la lettura del sorgente non-min.

Ora, la mia precedente avvertimento era che a volte librerie per jQuery torneranno un oggetto a se stessi e l'oggetto all'interno della libreria non è garantito per essere un jQueryObject [] (per usare di nuovo il mio nomenclatura). Ecco, questo è al di fuori del campo di applicazione del concatenamento. Tutte le librerie vi dirà che cosa un oggetto rendimenti, che si tratti di un int, string, oggetto, jQuery o qualsiasi altra cosa.

Così, per esempio, al .height () jQuery, nella barra blu in basso Nella pagina che si vede: .height () Restituisce: Integer, ma più in basso nella pagina: .height (valore) Restituisce: jQuery e sul href="http://api.jquery.com/each/" rel="nofollow noreferrer"> .each ()

Quindi, si può vedere come gli scrittori di documentazione API ti dicono ciò che viene restituito da ogni funzione. Ecco come si può sapere che cosa l'oggetto successivo prenderà in su di concatenamento. Ecco perché a volte non è possibile a catena certe cose insieme.

Ok, questo è un sacco di informazioni in un solo colpo, ma si voleva il rapido e sporco, e se questo non vi portano fino a velocità non so cosa farà.

tl; dr: dispiace per il muro di testo, ma è un pezzo contiguo di risposta. Ya Wanna Know, tornare indietro e leggerlo.

Altri suggerimenti

I affronterò Domanda # 1, il perché , quindi molti tutorial là fuori non sono sicuro di ciò che è meglio. La vostra visione d'insieme del concatenamento non è lontano, ha solo bisogno di un po 'di regolazione su questa linea:

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

È necessario aggiungere un ritorno, e chiamare .length non come una funzione, in questo modo:

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

Una funzione deve return qualcosa (in questo caso!), E .length è una proprietà (della matrice di oggetti all'interno dell'oggetto jQuery). Tuttavia, in questo caso, vedere la risposta di Cletus, è una migliore soluzione globale per impostare l'altezza come si vuole.

Non sono sicuro da guardando il codice per questo che non funziona, ma questo è un modo molto più semplice di ottenere la stessa cosa:

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

Non c'è nulla di magico funzioni concatenamento in jQuery. Tra l'altro, quando la gente dice "concatenazione" intendono chiamate come:

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

L'unica cosa che dovete sapere per capire che è che più metodi di jQuery restituire l'oggetto jQuery quindi è equivalente a:

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

La funzione che si passa a height() deve restituire un valore. Prova questo sul vostro codice interno:

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

Per quanto riguarda il concatenamento, in realtà non entrano in gioco nel codice sopra. In pratica, la maggior parte delle funzioni di jQuery restituire l'oggetto che avete appena dato seguito. Così, per esempio se si imposta l'altezza su un oggetto, l'oggetto viene restituito. Invece di questo:

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

Si può fare questo:

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

Così i due div di ogni dovrebbe essere la stessa altezza come la lista di sinistra? In altre parole:

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

perché che non guarda a destra. Certo, sto usando forme di dialogo semplicistiche per illustrare un punto, ma voglio essere sicuro. Sembra che si preferisce avere:

-      --
-      --
-      +
-      +

E così, probabilmente puntare (ma non l'ho ancora provato solo questo in un browser:

$(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() ) 
                           ); 
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top