主页 / 问题 / 691577
Accepted
Yuri
Asked:2020-07-13 03:37:30 +0000 UTC2020-07-13 03:37:30 +0000 UTC

捕获 flexbox 中同一行的相邻项目

  • 772

父元素有子元素，其中一些位于一行，一些位于另一行。

.box {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid blue;
  padding: 2px;
}

.el {
  height: 50px;
  border: 2px solid red;
  margin: 2px;
}

.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
  flex-grow: 3;
}

.el:nth-child(5), .el:nth-child(6) {
  flex-grow: 2;
}

.break {
  width: 100%;
}
<div class="box">
  <div class="el"></div>
  <div class="el select"></div>
  <div class="el"></div>
  <div class="break"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>

如何确定一个元素在同一行中是否有右邻居或左.el.select邻居？.el

即应该显示右边有吸：

.box {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid blue;
  padding: 2px;
}

.el {
  height: 50px;
  border: 2px solid red;
  margin: 2px;
}

.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
  flex-grow: 3;
}

.el:nth-child(5), .el:nth-child(6) {
  flex-grow: 2;
}

.el.select {
  border-color: green;
}

.break {
  width: 100%;
}
<div class="box">
  <div class="el"></div>
  <div class="el select"></div>
  <div class="el"></div>
  <div class="break"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>

这里 - 不在右边的是：

.box {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid blue;
  padding: 2px;
}

.el {
  height: 50px;
  border: 2px solid red;
  margin: 2px;
}

.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
  flex-grow: 3;
}

.el:nth-child(5), .el:nth-child(6) {
  flex-grow: 2;
}

.el.select {
  border-color: green;
}

.break {
  width: 100%;
}
<div class="box">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el select"></div>
  <div class="break"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>

这是缺少的东西：

.box {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid blue;
  padding: 2px;
}

.el {
  height: 50px;
  border: 2px solid red;
  margin: 2px;
}

.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
  width: calc(33.33333333% - 8px);
}

.el:nth-child(4), .el:nth-child(5) {
  width: calc(50% - 8px);
}

.el.select {
  border-color: green;
}
<div class="box">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el select"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>

javascript

1 个回答

  1. Best Answer

    我写了一个小脚本来确定给定行中的所有相邻元素

    (function() {
  $.fn.siblingsInRow = function(direction) {
    var $target = $(this),
      $siblings = $target.siblings().filter(function() {
        return $(this).css('position') !== 'absolute' && $(this).css('position') !== 'fixed';
      }),
      $parent = $target.parent();

    var int__target_border_left = $target.offset().left,
      int__target_border_right = $target.offset().left + $target.outerWidth();

    var $sensor = $('<div style="align-self: stretch;width:0;visibility:hidden;"></div>');

    $target.after($sensor);

    var data = {
      border: {
        left: $parent.offset().left,
        right: $parent.offset().left + $parent.outerWidth(),
        top: $sensor.offset().top,
        bottom: $sensor.offset().top + $sensor.outerHeight()
      },
      siblings: {
        left: [],
        right: []
      }
    };

    $sensor.remove();

    $siblings.each(function() {
      var el_border = {
        top: $(this).offset().top,
        bottom: $(this).offset().top + $(this).outerHeight(),
        left: $(this).offset().left,
        right: $(this).offset().left + $(this).outerWidth()
      };

      if (data.border.top <= el_border.top && data.border.bottom >= el_border.bottom) {
        if (int__target_border_right < el_border.left && data.border.right > el_border.right) data.siblings.right.push(this);
        if (int__target_border_left > el_border.right && data.border.left < el_border.left) data.siblings.left.push(this);
      };
    });

    switch (direction) {
      case 'left':
        return $(data.siblings.left);
        break;
      case 'right':
        return $(data.siblings.right);
        break;
      default:
        return $([].concat(data.siblings.left, data.siblings.right));
    };
  };
})();

$(function() {
  var $item = $('.wrapper__item'),
    $target = $item.eq(Math.floor(Math.random() * ($item.length + 1)));

  $target.addClass('_selected');

  $('#all').append($target.siblingsInRow().length);
  $('#left').append($target.siblingsInRow('left').length);
  $('#right').append($target.siblingsInRow('right').length);

  $target.siblingsInRow('left').html('Я слева!');
  $target.siblingsInRow('right').html('Я справа!');
});
    .wrapper {
  display: flex;
  width: 480px;
  margin: 0 auto;
  padding: 2.5px;
  border: 2px solid blue;
  flex-wrap: wrap;
}

.wrapper__item {
  border: 2px solid red;
  margin: 2.5px;
  height: 50px;
}

.wrapper__item._w-1 {
  flex-grow: 1;
}

.wrapper__item._w-2 {
  flex-grow: 2;
}

.wrapper__item._w-3 {
  flex-grow: 3;
}

.wrapper__item._h-1 {
  height: 25px;
  align-self: flex-start;
}

.wrapper__item._h-2 {
  height: 25px;
  align-self: flex-end;
}

.wrapper__item._h-3 {
  height: 25px;
  align-self: center;
}

.wrapper__item._selected {
  background-color: yellow;
}

.wrapper__break {
  width: 100%;
  height: 0;
  visibility: hidden;
}

.info {
  width: 480px;
  margin: 0 auto;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="wrapper__item _w-1 _h-3"></div>
  <div class="wrapper__item _w-2 _h-1"></div>
  <div class="wrapper__item _w-1"></div>
  <div class="wrapper__item _w-3 _h-2"></div>
  <div class="wrapper__item _w-2"></div>
  <div class="wrapper__break"></div>
  <div class="wrapper__item _w-1 _h-1"></div>
  <div class="wrapper__item _w-3 _h-3"></div>
  <div class="wrapper__item _w-2"></div>
  <div class="wrapper__item _w-1"></div>
  <div class="wrapper__item _w-3 _h-2"></div>
</div>
<div class="info">
  <p id="all">Всего соседей в ряде: </p>
  <p id="left">Количество элементов слева: </p>
  <p id="right">Количество элементов справа: </p>
</div>

    • 0

相关问题