jquery計算寬度和se div標記

我正在爲網站做網格系統。標記看起來像這樣jquery計算寬度和se div標記

<div class="section"> 
    <div class="grid"> 

    </div> 
    <div class="grid"> 

    </div> 
    <div class="grid"> 

    </div> 
    <div class="grid"> 

    </div> 
</div> 
<div class="section"> 
    <div class="grid"> 

    </div> 
    <div class="grid"> 

    </div> 
    <div class="grid"> 

    </div> 
</div>

該類柵格寬度爲33.3333333333％。

我想插入div每次網格總和達到100或接近100％。這樣的標記看起來像這樣

<div class="section"> 
    <div class="grid"> 

    </div> 
    <div class="grid"> 

    </div> 
    <div class="grid"> 

    </div> 
     <div class="clear"></div> <!-- inserted div --> 
    <div class="grid"> 

    </div> 
</div> 
<div class="section"> 
    <div class="grid"> 

    </div> 
    <div class="grid"> 

    </div> 
    <div class="grid"> 

    </div> 
     <div class="clear"></div> <!-- inserted div --> 
</div>

這是我迄今爲止。我的包裝是最大972px寬

var grid = $('.grid'); 
var wrapper = $('.wrapper').width(); 

$(grid).each(function() { 
    var gridWidth = $(this).width(); 
    var percentage = (gridWidth/wrapper)*100; 


    console.log(percentage); 
});

任何人都可以幫助我嗎？

編輯：我添加了一個截圖，所以你可以看到這個問題。第四個元素有一個餘裕，這是不應該的。這就是爲什麼我想要添加一個清除的原因 enter image description here

來源

2012-10-05 Johansrk

豈不這種它的自我了，如果每一個網格元素漂浮，具有相同的寬度。第四個元素不適合，將落在另一排，在其他下面。鑑於你在包裝上有一個固定的寬度。或者我在這裏錯過了什麼？或者，你是否在清除班級方面做了比清除班級更多的事情？ –

原因是在網格內部我有一個div元素留有餘量。用一些CSS，我聲明第一個元素不應該留有餘量。當四個元素由於浮動而下降時，它有一個餘裕。因此，如果有一個明確的標籤，我會知道什麼時候設置另一個餘量：0 – Johansrk

首先，請注意代碼中的一些差異。在HTML中，您使用的是「section」類，在jQuery中，您選擇的是「.wrapper」。

而不是你應該嘗試這樣的事：

$('.section').each(function() { 

    var rowPixels = 0; 
    $(this).find('.grid').each(function() { 

     var gridWidth = $(this).width(); 
     rowPixels += gridWidth; 

     if (rowPixels >= $('.section').width()) { 
      $(this).after('<div class="clear"></div>'); 
      rowPixels = 0; 
     } 

    }); 

});

來源

2012-10-05 12:19:43

請投票，如果沒關係:) –

它非常接近，在那裏alomost。只有一個問題。它需要查看一個部分，並執行每個部分。然後進入新文本並分別執行。否則，不同部分的網格將被添加到一起。這會導致adde在不需要時清除。 – Johansrk

感謝您的更新，仍然同樣的問題..如此接近 – Johansrk

jquery計算寬度和se div標記

回答

相關問題