[英]javascript/jquery selecting last element in row
I'm using "float: left" to place blocks in container. 我正在使用“ float:left”将块放置在容器中。 Like this on large screen:
在大屏幕上像这样:
on small scree: 在小屏幕上:
can i select last element on row when user clicks on any element? 用户单击任何元素时,我可以选择行中的最后一个元素吗?
If the elements are all inline or floating then there wont be a concept of a "last element on row"
. 如果元素都是内联或浮动的,则不会有
"last element on row"
的概念。
I suggest you calculate the element using known values: 我建议您使用已知值来计算元素:
$('.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();
});
Updated my answer with one that works. 用有效的方法更新了我的答案。 Here's the fiddle: http://jsfiddle.net/gvbw9Lkz/4/
这是小提琴: http : //jsfiddle.net/gvbw9Lkz/4/
As an alternative you can dynamically work out which elements are in the same row by comparing their position()
values: 另外,您可以通过比较它们的
position()
值来动态计算出哪些元素在同一行中:
$(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'); }); });
.container { width: 300px; } .block { background-color: #000; width: 50px; height: 50px; margin: 10px; float: left; } .block.highlight { background-color: red; }
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.