我有一段文本，其中每个单词都用一个跨度包裹，我想在每行上找到第一个和最后一个跨度，它将需要使用调整大小功能并根据屏幕尺寸进行更改。我想添加一个类/添加填充。我已经在网站上使用jQuery库，因此不反对使用它。
<div>
<h2>
<a href="#">
<span>20</span><span>of</span><span>the</span><span>most</span><span>romantic</span><span>places</span><span>to</span><span>propose</span><span>in</span><span>Gloucestershire</span>
</a>
</h2>
</div>
到目前为止，我的jQuery看起来像这样
$( "h2 a span" ).each(function() {
console.log( $( this ).position() );
});
我的CSS只是基本的CSS，可以在这里看到
div {
width: 550px;
}
h2 {
font-size: 36px;
}
h2 a {
text-decoration: none;
padding: 10px 0px;
width: 200px;
display: inline;
color: #fff;
}
h2 a span {
background: #ff00ff;
padding: 10px 5px;
position: relative;
display: inline-block;
margin: 5px 0;
}
到目前为止，我已经设置了这个jsfiddle：http : //jsfiddle.net/nshk5cvd/10/
小提琴显示了我在每个跨度上的左位置，我只需要帮助就可以找到每行的第一个和最后一个跨度。
遍历跨度集合，并且：
如果它是集合中的第一个跨度，则它是一行中的第一个；
如果它是集合中的最后一个，则它是一行中的最后一个。
否则，请观察从顶部开始的偏移量，一旦它发生变化，您就知道它在新行中，因此当前索引处的span是该行的第一个，其前一个同级是前一行的最后。
var spans = $( "h2 a span" ), refTop = 0, top = 0;
spans.each(function( i) {
var $t = $( this ), top = this.getClientRects()[0].top;
if( i==0 ){
$t.addClass('first');
// set the reference top position to match the first span
refTop = this.getClientRects()[0].top;
}
if( i == spans.length - 1 ){
$t.addClass('last');
}
// if the top is greater than the reference it's the beginning of a new line
if( top > refTop ){
// if the current element is first, its previous sibling is the last.
$t.addClass('first').prev().addClass('last');
// update the reference for next line pass
refTop = top;
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句