javascript / jquery选择行中的最后一个元素

Question

我正在使用“float：left”将块放在容器中。在大屏幕上像这样：

小pree上的

：

当用户点击任何元素时，我可以选择行上的最后一个元素吗？

Answer 1

如果元素都是内联的或浮动的，那么就不会有"last element on row"的概念。

我建议您使用已知值计算元素：

$('.box').on('click', function (e) {
  // calculate how many boxes will be in a "row" 
  var windowWidth = $('ul').width();
  var boxWidth = $('.box').outerWidth();
  var boxesPerRow = ~~(windowWidth / boxWidth);

  // get the index of the clicked element
  var index = $(e.currentTarget).index();
  // get the column of the clicked element
  var col = (index % boxesPerRow) + 1;
  // calculate how far it is to the end of this row, 
  // and select that element
  var $endOfRow = $('.box').eq(index + boxesPerRow - col);
  if (!$endOfRow.length) $endOfRow = $('.box').last();

});

用一个有效的答案更新了我的答案。这是小提琴：http://jsfiddle.net/gvbw9Lkz/4/

Answer 2

作为替代方案，您可以通过比较position()值来动态计算出哪些元素位于同一行：

＆＃13;

＆＃13;

$(function() {
  // cache the collection of all the blocks
  var blocks = $('.block');

  blocks.on('click', function() {
    blocks.removeClass('highlight');

    var $this = $(this);
    // get the y coordinate of the clicked block
    var y = $this.position().top;

    // store the blocks in the row
    var rowBlocks = $this;

    // search backwards until we find a different y coordinate or reach 0
    for (var i = $this.index() - 1; i >= 0; i--) {
      var block = blocks.eq(i);
      if (block.position().top == y) {
        // add the element to the rowBlocks selector
        rowBlocks = rowBlocks.add(block);
      } else {
        // different coordinate, stop searching
        break;
      }
    }

    // search forwards until we find a different y coordinate or reach the end
    for (var i = $this.index() + 1; i < blocks.length; i++) {
      var block = blocks.eq(i);
      if (block.position().top == y) {
        // add the element to the rowBlocks selector
        rowBlocks = rowBlocks.add(block);
      } else {
        // different coordinate, stop searching
        break;
      }
    }

    // hightlight the row
    rowBlocks.addClass('highlight');
  });

});

＆＃13;

.container {
  width: 300px;
}
.block {
  background-color: #000;
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
}
.block.highlight {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
  <div class="block">6</div>
  <div class="block">7</div>
  <div class="block">8</div>
  <div class="block">9</div>
  <div class="block">10</div>
  <div class="block">11</div>
  <div class="block">12</div>
  <div class="block">13</div>
  <div class="block">14</div>
  <div class="block">15</div>
  <div class="block">16</div>
  <div class="block">17</div>
  <div class="block">18</div>
  <div class="block">19</div>
  <div class="block">20</div>
</div>

＆＃13;

＆＃13;

＆＃13;