Question

使用jQuery 1.6.2

我在父级中有一个可变数量的浮动div。父可能具有固定的宽度，但也可能没有。

我想使用jQuery计算出一行中有多少个div，然后插入一个div，并将clear属性设置为两者，这样孩子们可能有不同的高度而不会弄乱一切，而父可能有一个可变的宽度。

在标记或服务器端脚本中执行它是一件简单的事情，如果你知道div的宽度，并且知道你想要连续多少个孩子 - 但是如果一切都是有点流动吗？

有没有一种简单的方法可以做到这一点，或者我将不得不做一些有关所有宽度的工作和一些聪明的数学来决定在哪里放置明确的div？

Answer 1

试试这个：

示例jQuery插件（无法提供更好的插件名称）：

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

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

<强>用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="jquery.addLineBreak.js"></script>
        <script type="text/javascript">
            $(function () {
                // '.inner' is the selector for the child elements!
                $('.inner').addLineBreak('<div class="clear"></div>');

                // on resize, remove the clear-elements, and inject new ones
                $(window).resize(function () {
                    $('#tmp .clear').remove();
                    $('.inner').addLineBreak('<div class="clear"></div>');
                });
            });
        </script>

        <style type="text/css">
            body {
                background: black;
            }

            .inner {
                float: left;
                margin: 5px;
                padding: 5px;
                border: 1px solid #efefef;
            }

            .clear {
                clear: both;
            }
        </style>
    </head>

    <body>
        <div id="tmp">
            <?php for ($i = 0; $i < 25; $i += 1): ?>
                <div class="inner" style="width: <?php echo rand(100, 150); ?>px; height: <?php echo rand(100, 150); ?>px"><?php echo $i; ?></div>
            <?php endfor; ?>
        </div>
    </body>
</html>

在可变宽度父级中清除子元素行

1 个答案: