[JQUERY] Modifica attributi

[Baio84]

Il mio problema è il seguente: ho una lista di immagini (<li><img><li>) e vorrei dare a <li> un margine alto in proporzione all'altezza dell'immagine, in modo tale che l'immagine poi risulti centrata verticalmente. Ho creato una funzione con jquery che me lo fa, il problema è che non riesco a dare ad ogni <li> il giusto margine collegato all'immagine, in quanto la funzione me li standardizza tutti uguali. Ho pensato che l'unica possibilità sia di utilizzare un ciclo for, ma pensavo che con jquery si potesse farne a meno

HTML

<div id="box-immagini">
					<ul>
						<li><img src="DSC01126.jpg" class="anteprima" alt="Duchi" /></li>
						<li><img src="DSC01127.jpg" class="anteprima" alt="Noi 3" /></li>
						<li><img src="DSC01128.jpg" class="anteprima" alt="Noi 3 2" /></li>
						<li><img src="DSC01133.jpg" class="anteprima" alt="Triade" /></li>
						<li><img src="DSC00943.jpg" class="anteprima" alt="Frutta" /></li>
						<li id="nina"><img src="Bonnie.jpg" class="anteprima" alt="Bonnie" /></li>
						<li><img src="briseide.jpg" class="anteprima" alt="Briseide" /></li>
						<li><img src="budino.jpg" class="anteprima" alt="Budino" /></li>
						<li><img src="Diamante.jpg" class="anteprima" alt="Diamante" /></li>
						<li><img src="Dile e Toby.jpg" class="anteprima" alt="Dile e Toby" /></li>
						<li><img src="dorothy1.jpg" class="anteprima" alt="Dorothy" /></li>
					</ul>
				</div>

JQUERY

$("li img").load(function() {
				var alte = $("li img:first").height(); //Prelevo l'altezza dell'immagine
				var marginTop = (83 - alte) / 2; //Calcolo il margine
				$("li").css({marginTop: marginTop + "px"}); //Qui si dovrebbe assegnare il margine, però così me lo assegna a tutti
			});

[idoido]

dai un'occhiata alla funzione each() di jquery
anche a questo link

http://www.gleenk.com/jquery-each-ri...zione-diversa/

[Baio84]

Grazie al tuo consiglio ho risolto.

Mi sono affacciato da poco su questo linguaggio e sto apprendendo piano piano.
Una domanda riguardo l'esempio. Lì la funzione che crea lui, la apre dopo che il documento viene caricato completamente. All'inizio ho fatto anch'io così, ma mi leggeva l'altezza delle immagini me le leggeva pari a zero. Ho dovuto correggere inserendo $("li img").load(function() { ... }). Ora è a posto. Sapresti spiegarmi il perchè?

JQUERY

function centraimmagini() {
		$("li").each(function() {
			var alte = $("img", this).height();
			var marginTop = (83 - alte) / 2;
			$(this).css({marginTop: marginTop + "px"});
		});
	};

	$(document).ready(
		function() {
			$("li img").load(function() {
				centraimmagini();
			});
});