If last div jquery

[fabioweb90]

Buonasera forum,


ho una pagina dinamica che a seconda delle offerte presenti nel database mi genera il seguente codice.


nel caso di un'offerta presente

<div id="offerte"> <div class="bodyOfferta"></div></div>

nel caso di tre offerte

<div id="offerte"> <div class="bodyOfferta"></div><div class="bodyOfferta"></div><div class="bodyOfferta"></div></div>

Poichè è un meccansimo molto particolare ho la necessità di dare obbligatoriamente la seguente istruzione che non so come trasformare lato codice:


Se ho tre offerte assegna all'ultimo <div class="bodyOfferta"></div> un margin-bottom di 40px;


Se ho due offerte quindi

<div id="offerte"> <div class="bodyOfferta"></div><div class="bodyOfferta"></div></div>

Assegna all'ultimo div un margin-bottom di 70px;


Come posso procedere?


Grazie!

[Silver1955]

con JQuery ... potresti contare gli elementi interni del div offerte, acquisire l'ultimo div interno e modificare lo style

    
    <div id="offerte"> 
        <div class="bodyOfferta" ></div>
        <div class="bodyOfferta" ></div>
        <div class="bodyOfferta" ></div>
    </div>
    
    
    <script>
        /** ... DOCUMENT READY */ 
        $( document ).ready( onDocumentReady );

        /** 
          *  FUNCTION : onDocumentReady() 
          */ 
        function onDocumentReady() 
        {
             /** ... ELEMENTO DIV offerte */   
             var divOfferte     = $("#offerte");

             /** ... ELEMENTI DIV INTERNI DI CLASSE .bodyOfferta */ 
             var divBody        = divOfferte.children('div .bodyOfferta')
        
             /** ... CONTA ELEMENTI DIV DI CLASSE bodyOfferta */
             var numOfferte    = divBody.size();
        
             /** ... ACQUISISCI ULTIMO DIV DI CLASSE bodyOfferta */ 
             var ultimaOfferta = divBody[ numOfferte - 1 ];

             switch ( numOfferte ) 
             {
                 case 2: /** ... */ 
                           ultimaOfferta.style["margin-bottom"] = "40px";
                           break;
                 case 3: /** ... */ 
                           ultimaOfferta.style["margin-bottom"] = "70px";
                           break;
                 default: /** ... */ 
            }
       }
    </script>

[KillerWorm]

Ciao.. in base a quanto hai riportato (se i casi possibili sono solo quei tre) potresti risolvere anche con una semplice soluzione pure css:

#bodyOfferta>div.bodyOfferta:last-child{ margin-bottom: 70px; }
#bodyOfferta>div.bodyOfferta:only-child{ margin-bottom: 0; }
#bodyOfferta>div.bodyOfferta:nth-child(3){ margin-bottom: 40px; }