divの幅を計算し、divを挿入します。

Question

私はこのコードを持っています。

<div class="container"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

コンテナDIVの子は、高さが異なるため、フロートの問題が発生します。子供の幅を見て計算するjqueryが欲しく、100％またはそれに近い場合は、明確なクラスのdivがマークアップに追加されます。

しかし、私はどのように始めるのか手がかりがありません。 divはすべてパーセンテージです。

更新： レスポンシブルなものについては、コードを少し変更して追加または削除できます。また、私は

$('.container div').each(function() { })がで、幅は何が必要である場合は、それぞれが

幅DIV計算width()またはouterWidth()機能を持つ会社ではjavascriptの選手の一人が

$(window).load(function() { 
    clearContext(); 
}); 

$(window).resize(function() { 
    clearContext(); 
}); 



function clearContext(){ 
    $('.contextElements .spot').addLineBreak(); //Choose target 
} 



// PLUGIN 
(function($) { 
    $.fn.addLineBreak = function() { 
     var $this = this, 
      minLeft = 0; 

     //clear 
     $('.removeDiv').remove(); 

     minLeft = $this.first().position().left; 

     $this.each(function() { 
      var $elm = $(this), 
       position = $elm.position(); 

      if (position.left > minLeft && $elm.prev().position().left >= position.left) {   
       $elm.before('<div class="clear removeDiv"></div>'); 
      } 
     }); 

     return this; 
    } 
})(jQuery); 

Answer 1

$('.container div').addLineBreak({clear: 'left'}); 

デモ：

http://jsfiddle.net/HLXvy/

Answer 2

1. それを最適化計算.container幅を持っていました.after()機能挿入クリアエレメント

希望します。

(function($) { 
    $.fn.extend({ 
    addLineBreak: function(css) { 
     var minLeft = $(this).position().left; 

     return $(this).each(function() { 
     var position = $(this).position(); 
     if (position.left > minLeft && $(this).prev().position().left >= position.left) { 
      $(this).css(css); 
     } 
     }); 
    } 
    }); 
})(jQuery); 

は使用法：：私は、これはしばらく前にプラグインを書いて、同様の目的のために