jquery - 计算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 的子级具有不同的高度，这意味着我遇到了 float 问题。我想要一些 jquery 来查看子级的宽度，计算它们，如果它们是 100% 或接近，则将具有明确类的 div 添加到标记中。

但是，我不知道如何开始。 div 均以百分比表示。

更新:对于响应式内容，我稍微更改了代码，以便可以添加或删除它。我还请了公司的一位 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

1. 使用 width() 或 outerWidth() 函数计算 .container 宽度
2. $('.container div').each(function() { }) 计算每个div的宽度
3. 如果宽度是您需要的，则使用 .after() 函数插入透明元素

希望这会有所帮助。