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

[fradamma]

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...

<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:

.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!

$(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]

io nel frattempo ho creato questo script, che però non funziona esattamente come vorrei:

$(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.

 

[criric]

Ciao, prova in questo modo

<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]

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!

 

[criric]

<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]

<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]

:fonzie: Buone feste anche a te