[RISOLTO] Settare l'altezza di due <li> "a specchio".

fradamma

Utente Attivo
28 Set 2012
93
0
0
Buon pomeriggio a tutti.
Il mio problema è il seguente. Ho all'interno di un div "wrapper" due div (left e right) che al loro interno hanno due <ul> con all'interno n-numero <li> (che non posso decidere a priori ma saranno generati dinamicamente sia per numero che per contenuto). Saranno due <ul> "a specchio" nel senso che quello di sinistra avrà lo stesso identico numero di <li> di quello a destra. Per farvi comprendere meglio vi posto il codice. Immaginatevi il div "left" flottato a sinistra e il div "right" flottato a destra. In tal caso ottengo due ul a specchio uno a destra e l altro a sinistra. L'effetto che devo ottenere è che ogni <li> sia allineato a quello corrispondente dall'altra parte...."a specchio" appunto...

Codice:
<div class="wrapper">
<div class="left">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
</div>
<div class="right">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
</div>
</div>

qui il css:
Codice:
.wrapper {}
.left {
    width:50%;
    float:left;
    height:100%;
}
.right {
    width:50%;
    float:left;
    height:50%;
}
.left ul {margin:0;}
.right ul {}
.left ul li {margin:0;}
.right ul li {}

Non potendo attribuire una altezza fissa ai <li> di sinistra (proprio perchè il loro contenuto sarà generato dinamicamente e non posso fissarla), devo assolutamente settare l'altezza del <li> corrispondente di destra affinchè abbia la stessa altezza di quello di sinistra e conseguentemente creare un allineamento tra <li> di <ul> differenti posti a specchio. ( il primo <li> di sinistra sarà allineato a quello di destra, il secondo anche, il terzo pure, ecc ecc... )

Come posso fare con Jquery? Farlo con i css è praticamente una cosa impossibile. Ho creato una bozza di script e ve lo posto, però mi sono bloccato. Potete darmi una mano? Grazie e buona serata!

Codice:
$(document).ready( function(){
    var rigaLeft = $(".wrapper left ul li");
   
    $.each( rigaLeft, function(){
       
        var leftHeight = $(this).height(); // prendo le altezze di tutti gli n-<li> di sinistra
        //console.log(leftHeight);
        
        var rigaRight = $(".wrapper .right ul li"); // prendo tutti gli n-<li> di destra
        
        $.each(rigaRight, function() {
            var rightHeight = $(this).height(); // prendo le altezze di tutti gli n-<li> di destra
            
            //console.log(rightHeight);
            //console.log(leftHeight);
            
            $(rigaRight).height(rightHeight); //qui non funziona. Non mi setta l altezza corrispondente
            
        });
        
        
        //$(rigaRight).height($(this).height());
        //console.log($(rigaRight).height());
    
    });
    
});
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
io nel frattempo ho creato questo script, che però non funziona esattamente come vorrei:

Codice:
$(document).ready( function() {
  // setto la variabile "biggestHeight" = 0
    var biggestHeight = 0;  
    // chekko ogni <li> all'interno di wrapper  
    $('.wrapper ul li').each(function(){  
    	// se l'altezza dell'elemento è maggiore di biggestHeight
         if( $(this).height() > biggestHeight){
            // aggiorno l'altezza maggiore con l'altezza dell'elemento corrente  
            biggestHeight = $(this).height();  
        }  
    });  
   
    //una volta ottenuta l'altezza maggiore dell'elemento li attribuisco questa altezza a tutti i <li> di wrapper 
    $('.wrapper ul li').height(biggestHeight);  

});

Infatti non fa altro che prendere l'altezza maggiore dei <li> e adattarla a tutti quanti. In realtà io devo riuscire ad adattare l'altezza del primo a sinistra con il primo a destra, del secondo a sinistra con il secondo a destra e così via...per n-<li>...
Ragazzi nessuno mi può dare una mano? buona giornata a tutti.
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, prova in questo modo
HTML:
<style>
    #container {
        width: 300px;
    }
    ul {
        list-style-type: none;
    }
    ul li {
        padding:8px;
        border:1px solid black;
        margin:1px 0;
    }
    #left {
        float:left;
    }
    #right {
        float:right;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
        $("#left li").each(function(k){
            $("#right li").eq(k).height($(this).height());
        })
    })
</script>
<div id="container">
    <ul id="left">
        <li>una linea</li>
        <li>una linea</li>
        <li>due <br/>linee</li>
        <li>una linea</li>
    </ul>
    <ul id="right">
        <li>una linea</li>
        <li>una linea</li>
        <li>una linea</li>
        <li>una linea</li>
    </ul>
</div>
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
Ciao Criric,
sembra funzionare perfettamente! :)
Mi spieghi però un attimo il funzionamento. Con un "each" dici che per ogni <li> di sinistra (#left) deve accadere qualcosa...ossia risetti l altezza delle righe a destra (... $("#right li").eq(k).height($(this).height()); ....)...i miei dubbi riguardano due cose:
1) perchè passi come variabile "k" e la riutilizzi nel metodo .eq(), a che serve?
2) non ho ben chiaro se sono i <li> di sinistra che si adattano a quelli di destra o quelli di destra che si adattano a quelli di sinistra.

cmq grazie ancora! :D
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
HTML:
<script>
    $(document).ready(function(){
        // ciclo tutti i li dell'ul #left
        // il parametro k è la chiave dell'elemento analizzato
        $("#left li").each(function(k){
            // assegno all'elemento li dell'ul #right l'altezza del li analizzato
            $("#right li").eq(k).height($(this).height());
        })
    })
</script>
in poche parole assegno al <li> di destra l'altezza del <li> di sinistra, visto che il numero di <li> è uguale per entrambi gli <ul> mi sembra la soluzione più semplice
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
HTML:
<script>
    $(document).ready(function(){
        // ciclo tutti i li dell'ul #left
        // il parametro k è la chiave dell'elemento analizzato
        $("#left li").each(function(k){
            // assegno all'elemento li dell'ul #right l'altezza del li analizzato
            $("#right li").eq(k).height($(this).height());
        })
    })
</script>
in poche parole assegno al <li> di destra l'altezza del <li> di sinistra, visto che il numero di <li> è uguale per entrambi gli <ul> mi sembra la soluzione più semplice

Grazie Criric...perfetto come sempre! buona giornata e buone feste ;)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
:fonzie: Buone feste anche a te
 
Discussioni simili
Autore Titolo Forum Risposte Data
L (risolto) MySQL 0
B getElementById su piu id(Risolto) Javascript 7
L Esercitarsi con Js [RISOLTO] Javascript 4
C [RISOLTO]Inserimento variabile php in input html PHP 20
L risolto visualizzazione e ordinamento dati PHP 1
moustache [RISOLTO] SQL PHP IIS PHP 8
Sergio Unia Ricezione email con destinatari multipli [Risolto] PHP 2
L update tabelle in php mysql [risolto] PHP 6
M Semplice visualizzatore di immagini [risolto con plugin wp] PHP 7
L [RISOLTO] Stampa a video risultato count in html PHP 13
L [RISOLTO] Eliminare una discussione creata PHP 3
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
A [PHP] Problema query insert [RISOLTO] PHP 14
B [PHP] recuperare IP dei server in load balancing [RISOLTO] PHP 3
K [RISOLTO] Problema Griglia Php+Mysql PHP 13
S [RISOLTO] aggiorna tabella da select option asp classic Classic ASP 7
elpirata [RISOLTO][Javascript] Datapicker e autocompletamento campo input Javascript 2
elpirata [RISOLTO][Mysql] Problema insert valori apostrofati MySQL 1
elpirata [RISOLTO][Mysql] Contare le occorrenze in un campo tipo varchar MySQL 2
G [MS Access] Gestione biglietti [RISOLTO] MS Access 2
G [MS Access] Casella combinata & Query [RISOLTO] MS Access 4
G [MS Access] Query mese corrente con conteggio [RISOLTO] MS Access 2
M [RISOLTO]Windows media player non mi funziona più su win 10 pro 64 bit Windows e Software 2
C [RISOLTO][PHP] Errore di sintassi PHP 8
IT9-Gpp [RISOLTO] Leggere variabile restituita da success Ajax 3
Kolop [RISOLTO][PHP] Problema Pagination PHP 2
C [RISOLTO][PHP] Funzione ONclick PHP 14
C [RISOLTO][PHP] Conteggio righe di una tabella PHP 4
N [PHP] Utilizzo variabili di sessione [Risolto] PHP 13
Tommy03 [RISOLTO][PHP] Webserver o devserver? PHP 2
Sergio Unia Recupero dati da una vecchia versione MySql [Risolto] MySQL 4
spider81man [PHP] Problemi cancellazione dato su DB [RISOLTO] PHP 1
A [RISOLTO]Inserimento Immagini da pc a MySql PHP 15
A [PHP] RISOLTO Invio Mail con Tabella PHP 2
felino Risolto - [Wordpress][WooCommerce] PayPal Checkout e campi di fatturazione WordPress 2
elpirata [PHP][RISOLTO] Sommare gli importi estratti da un ciclo while PHP 3
elpirata [PHP][RISOLTO] Effettuare la somma dei tempi di lavorazione PHP 3
elpirata [PHP] [RISOLTO]Sovrascrivere testo in una tabella PHP 2
A [RISOLTO]Recuperare dati inviati con json tramite php PHP 4
C [RISOLTO][PHP] Passaggio variabili senza refresh di pagina PHP 7
elpirata [PHP][RISOLTO] Errore di tipo Notice: Undefined index - Come risolvere quando si hanno tante var PHP 10
S Problema in PHP per invio file XML - RISOLTO- PHP 8
A [Javascript] [RISOLTO] Doppio "submit", in uno stesso "Form" , che puntino ad "action" diversi Javascript 1
marino51 [Risolto]videochat di messenger ha smesso di funzionare sul telefonino Smartphone e tablet 1
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
ken_korn [Javascript][Risolto] browser.tab.Tabs.favIconUrl non funziona Javascript 5
A [RISOLTO] HighChart e PHP PHP 4
A [RISOLTO] PHP Selezionare tutti i file con stessa estensione PHP 2
A [RISOLTO] Table elaborata da codice PHP con dati da DB non visualizzata in IFRAME PHP 15
T [Photoshop] Problema creazione pennello personalizzato [RISOLTO] Photoshop 3

Discussioni simili