如何動態更改Jquery傳送帶中焦點物品的高度？

Question

摘要 -

我正在使用Jcarousel jquery plugin來瀏覽項目列表。這些項目不是圖片/圖片，我們可以在這裏找到大多數例子。我的項目是帖子，可能高度不同。儘管多次嘗試，但我無法做到正確。

HTML結構

 <div class="div1">   
      <div class="div2"> 
       <div class="jcarousel"> 
        <ul> 
         <li> 
          <div class="item">ITEM 1</div>div> 
         </li> 
         <li> 
          <div class="item">ITEM n</div>div> 
         </li> 
        </ul> 
       </div> 
       <a href="#" class="jcarousel-control-prev">&lsaquo;</a> 
       <a href="#" class="jcarousel-control-next">&rsaquo;</a> 
      </div> 
     </div> 

的<ul>中的每個項目都會有不同的高度，雖然我不能使它發揮作用。我希望<div class="jcarousel">根據每個<li>內部的<div>的高度動態更改其高度。

CSS

 .div1 { 
     height: auto; 
     background: none repeat scroll 0% 0% rgb(255, 255, 255); 
     border-width: medium 1px 1px; 
     border-style: none solid solid; 
     border-color: -moz-use-text-color rgb(255, 255, 255) rgb(255, 255, 255); 
     padding: 20px 20px 0px; 
     margin-bottom: 50px; 
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.46); 
    } 

    .div2 { 
     margin-top: -50px; 
    } 

    .jcarousel { 
     position: relative; 
     overflow: hidden; 
     height: 700px; 
     margin: 0px -20px; 
     padding: 0px 20px; 
    } 

    .jcarousel ul { 
     width: 20000em; 
     position: absolute; 
     list-style: none outside none; 
     margin: 0px; 
     padding: 0px; 
    } 


    .jcarousel li { 
     float: left; 
     width: 480px; 
    } 

    .item { 
     margin: 0px; 
     padding: 0px 20px; 
     height: 100%; 
    } 

JS（努力克服高度問題。不知道這一段代碼以某種方式影響Jcarousel.js。不幸的是這只是有時會改變正常的高度。大部分的時間，如果持續先前的高度，又保持它，或者改變以錯誤的方式）

 <script type="text/javascript"> 
     $(document).ready(function(){ 


       // checking the height of the first element in the <ul> 
      var count = 0; 
      var count_max = $(".jcarousel li").length; 


      var initial_height = $(".jcarousel ul li:eq("+count+") div.item").height(); 
      $(".jcarousel").height(initial_height); 


      // changing height when pressing the prev control 
      $(document).on("click",".jcarousel-control-prev", function(){ 
       if (count == 0) { 

       } else { 
        count = count-1; 
        var new_count = $(".jcarousel li:eq("+count+") div.item").height(); 
        $(".jcarousel").height(new_count); 
       } 
      }); 

      // changing height when pressing the next control 
      $(document).on("click",".jcarousel-control-next", function(){ 
       if (count !== count_max) { 
        count = count+1; 
        var new_count = $(".jcarousel li:eq("+count+") div.item").height(); 
        $(".jcarousel").height(new_count); 



       } else { 
        // trying to update the counter when reach the last <li> element within the <ul> 
        count = 0; 
        var initial_height = $(".jcarousel ul li:eq("+count+") div.item").height(); 
        $(".jcarousel").height(initial_height); 

       } 


      }); 



     }); 
     </script> 

Answer 1

嘗試一些事情後，我想出了以下解決方案：

我意識到，提前製作與<ul><li>的所有高度的數組它響應速度不夠快，以正確地更新.Jcarousel div的高度。

JS

 <script type="text/javascript"> 
      $(document).ready(function(){ 


        // checking the height of the first element in the <ul> 
       var count = 0; 
       var count_max = $(".jcarousel li").length; 


       var alturas = []; 

        $(".jcarousel li div.cenario").each(function(){ 
         var height = $(this).height(); 
         alturas.push(height); 
        }); 

       $(".jcarousel").css('height',alturas[count]); 


       // changing height when pressing the prev control 
       $(document).on("click",".jcarousel-control-prev", function(){ 
        if (count == 0) { 

        } else { 
         count = count-1; 
         $(".jcarousel").css('height',alturas[count]); 
        } 
       }); 

       // changing height when pressing the next control 
       $(document).on("click",".jcarousel-control-next", function(){ 
        if (count !== count_max) { 
         count = count+1; 
         $(".jcarousel").css('height',alturas[count]); 



        } else { 
         // trying to update the counter when reach the last <li> element within the <ul> 
         count = 0; 
         $(".jcarousel").css('height',alturas[count]); 
        } 


       }); 

      }); 
     </script> 

Answer 2

您是否嘗試過在父DIV使用overflow:auto？

Answer 3

雖然這是一個老問題，也許有人會覺得它有用。

我已經成功地解決在的jCarousel的初始化只是兩條額外的線條此問題：

var carousel = $('.carousel'); 

carousel.on('jcarousel:reload jcarousel:create', function() { 
    /* set carousel's height basing on the first item */ 
    $(carousel._element).height(carousel.jcarousel('items').eq(0).height()); 
}).on('jcarousel:targetin', 'li', function(event, carousel) { 
    /* reset carousel's height and set a new value basing on the active element's height */ 
    $(carousel._element).height('auto').height($(this).height()); 
}).jcarousel({ 
    wrap: 'circular' 
});