你可以迭代所有.sliderLegend
元素(第一个元素除外),并将该元素的左侧位置与最近的前一个元素的右侧位置进行比较。
如果最近的前一个元素的右侧大于当前元素的左侧,则您知道它们重叠,并且可以删除当前正在迭代的元素。
在下面的例子中,条件是left < prevRight + 6
,所以有一个6px
缓冲。只需根据您想要的数字之间的间距调整该数字即可。
更新的示例 http://jsfiddle.net/67245u1b/
$('#slider .sliderLegend').slice(1).each(function() {
var left = $(this).position().left,
$prev = $(this).prevAll(':has(.sliderLegendNumber)').first(),
prevRight = $prev.position().left + $prev.width(),
$item = $(this).is(':last-child') ? $prev : $(this);
if (left < prevRight + 6) {
$item.find('.sliderLegendNumber').remove();
}
});
此外,您遇到的部分问题是所有的孩子div
元素的宽度固定为20px
。因此,您无法准确计算元素的左偏移位置,因为文本会溢出。为了解决这个问题,我删除了固定宽度并添加了transform: translateX(-50%)
为了使元素水平居中。
更新的示例 http://jsfiddle.net/67245u1b/
#slider > div {
position: absolute;
text-align: center;
margin-top: 20px;
transform: translateX(-50%);
}
1-50 的范围现在将生成以下内容:
1-100 的范围将生成以下内容:
此外,如果您还想删除这些行,请删除整个元素而不仅仅是数字: