javascript - jQuery:检测 Flexbox 内的位置

Question

我有几个盒子，使用 Flexbox 作为容器，列表标签作为里面的盒子。当您调整宽度大小时，它们会响应并改变位置。我正在尝试通过 jQuery 找出一种方法来检测哪些框触及左侧，哪些框触及右侧，这样我就可以 addClass的 right或 left根据他们的造型位置给他们。我认为可以使用偏移来实现这一点，我正在弄清楚如何开始。有任何想法吗？

JSFiddle

.container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    flex-direction: row;
    list-style:none;
}
li {
    border:10px salmon solid;
    padding: 25px 15px;
    text-align: center;
    font-size: 1.2em;
    background: white;
    flex-grow: 3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="container">
    <li>Alabama</li>
    <li>California</li>
    <li>Florida</li>
    <li>Idaho</li>
    <li>Kansas</li>
    <li>Nevada</li>
    <li>New York</li>
</ul>

Answer 1

这是 jQuery 代码，将其放在页面底部:

(function(){
    function addClass(ul){
        ul.children('li.left').removeClass('left');
        ul.children('li.right').removeClass('right');

        $('ul > li:first-child').attr('class', 'left');
        $('ul > li:last-child').attr('class', 'right');

        var ulWidth = ul.width();
        var totalWidth = 0;

        ul.children('li').each(function () {
            totalWidth += ($(this).width() + 50);
            if (totalWidth > ulWidth) {
                $(this).addClass('left');
                $(this).prev().addClass('right');
                totalWidth = $(this).width();
            }
        });
    }

    var ul = $('ul.container');
    addClass(ul);

    $(window).on('resize', function(){
        addClass(ul);
    });
}());

此外，代码中的数字 50 是 'li' 左右填充和左右边框加起来为 50。(15 + 15 + 10 + 10) 如果需要，请更改它。

希望对您有所帮助!