jQuery:检测Flexbox内部的位置

jQuery: Detect the position inside Flexbox

本文关键字：位置 内部 Flexbox 检测 jQuery      更新时间：2023-09-26

我有几个盒子，使用Flexbox作为容器，并将标签列为里面的盒子。当你调整宽度时，它们会做出反应并改变位置。我正试图通过jQuery找到一种方法来检测哪些盒子接触左侧，哪些盒子接触右侧，这样我就可以根据它们的位置向它们right或left中的addClass进行造型。我认为使用偏移量来实现这一点是可能的，我正在研究如何开始。有什么想法吗？

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>

这是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）如果需要，请进行更改。

希望它能有所帮助！

我创建了这个小函数，它帮助我在flex父容器中使用可变宽度元素做了更多的技巧，希望它能帮助一些处理这个线程的人，jquery选择器不是从性能角度编写的，所以根据需要修改：

function setFlexClasses(parent_selector) {
        //set parent jquery obj
        parent = $(parent_selector);
        //remove classes: flex-position-* , flex-row-*
        parent.find(' > div').removeClass (function (index, css) {
          return (css.match (/(^|'s)(flex-position-.*|flex-row-.*)'S+/g) || []).join(' ');
        });
        //set helper classes for first and last element of this "list"
        parent.find(' > div:first-child').addClass('flex-position-first');
        parent.find(' > div:last-child').addClass('flex-position-last');
        //initialize positioning variables
        var parent_offset = parent.offset();
        var max_vertical_space = 0;
        var row_count = 0;
        //for each element in the query
        parent.find(' > div').each(function (index) {
          //get element metrics
          var element_metrics = $(this).offset();
          element_metrics.top -= parent_offset.top;
          element_metrics.left -= parent_offset.left;
          element_metrics.height = $(this).height();
          element_metrics.vertical_space = element_metrics.height + element_metrics.top;
          //increment row_count if element is below previous elements and set helper classes for row[first|last]
          if(element_metrics.top > max_vertical_space) {
            $(this).addClass('flex-position-rowfirst');
            $(this).prev().addClass('flex-position-rowlast');
            row_count++;
          }
          //reset max_vertical_space if needed
          if(element_metrics.vertical_space > max_vertical_space) {
            max_vertical_space = element_metrics.vertical_space;
          }
          //
          $(this).addClass('flex-row-' + row_count);
        });
      }

$.each($('ul'), function() {
    var w = $(this).width();
    var totalwidth = 0;
    $.each($(this).children('li'), function() {
        var elw = $(this).width();
        if (totalwidth == 0) {
           $(this).addClass('left');
        }
        totalwidth += elw;
        if (Math.abs(w - totalwidth) < 1) {
           $(this).addClass('right');
           totalwidth = 0;
        }
    })
})
相关文章：