针对第一个和最后一个非溢出元素

问题描述：

为了返回向右和向左溢出的项目数量，我正在寻找一种方法来定位不溢出的第一个和最后一个元素（所以我可以在他们之前和之后计数）。针对第一个和最后一个非溢出元素

.container { 
 
    overflow: hidden; 
 
    width: 430px; 
 
    display: flex; 
 
    border: 2px solid green; 
 
} 
 

 
.inner { 
 
    height: 100px; 
 
    width: auto; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: relative; 
 
    right: 145px 
 
} 
 

 
a { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid grey; 
 
    margin: 0 10px; 
 
}

<div class="container"> 
 
    <div class="inner"> 
 
    <a>1</a> 
 
    <a>2</a> 
 
    <a>3</a> 
 
    <a>4</a> 
 
    <a>5</a> 
 
    <a>6</a> 
 
    <a>7</a> 
 
    <a>8</a> 
 
    <a>9</a> 
 
    <a>10</a> 
 
    <a>11</a> 
 
    <a>12</a> 
 
    <a>13</a> 
 
    <a>14</a> 
 
    </div> 
 
</div>

在本例我会如何定位的第一和最后一个不溢出元件（在这种情况下3和8）？

我试过类似$('.inner a:visible').last()或$('.inner a:visible:last')但它不起作用。

谢谢！

答

您可以使用offset()，然后filter()取出小于0且大于父宽度的元素并取第一个和最后一个元素。

var c = $('.container'); 
 
var cl = c.offset().left; 
 

 
$('a').filter(function() { 
 
    var xl = $(this).offset().left 
 
    return (cl - xl) < 0 
 
}).first().css('background', 'red') 
 

 
$('a').filter(function() { 
 
    var xl = $(this).offset().left 
 
    return xl < (cl + c.width()) 
 
}).last().css('background', 'red')

.container { 
 
    overflow: hidden; 
 
    width: 430px; 
 
    display: flex; 
 
    border: 2px solid green; 
 
    margin-left: 100px; 
 
} 
 

 
.inner { 
 
    height: 100px; 
 
    width: auto; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: relative; 
 
    right: 145px; 
 
} 
 

 
a { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid grey; 
 
    margin: 0 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="inner"> 
 
    <a>1</a> 
 
    <a>2</a> 
 
    <a>3</a> 
 
    <a>4</a> 
 
    <a>5</a> 
 
    <a>6</a> 
 
    <a>7</a> 
 
    <a>8</a> 
 
    <a>9</a> 
 
    <a>10</a> 
 
    <a>11</a> 
 
    <a>12</a> 
 
    <a>13</a> 
 
    <a>14</a> 
 
    </div> 
 
</div>

谢谢您的回答，这让我从我想要达到非常接近。然而，我的问题是，它似乎并没有为最后一个元素工作，因为它似乎计算从整个文档，而不是容器的偏移量（我相信）。我对这个函数不是很熟悉，但它似乎是从文档的左边开始以集合宽度（容器的）的最后一个元素为目标。因此，所选元素将根据我的容器在页面上的位置而有所不同。希望我的解释不是太混乱，我可以根据需要添加屏幕截图。 – eloism

@eloism你是对的，尝试更新的解决方案。 –

也许你还必须在计算中加入'a'元素的宽度，但你可以计算出来。 –

针对第一个和最后一个非溢出元素

相关推荐