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

2019年8月3日 152次阅读

使用jQuery 1.6.2

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

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

如果您知道div的宽度并且知道您想要连续多少个孩子,那么在标记或服务器端脚本中执行它是一件简单的事情 – 但是如果所有内容都更加流畅呢？

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

最佳答案 试试这个：

示例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>
点赞