Question

我有一段文字，其中每个单词都包含在一个范围内，我想在每一行找到第一个和最后一个跨度，它需要使用调整大小功能并根据屏幕大小进行更改。我想添加一个类/添加填充。我正在网站上使用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/

小提琴显示我每个跨度的左侧定位，我只需要帮助在每一行找到第一个和最后一个跨度。

Answer 1

迭代跨度集合，并且：
如果它是集合中的第一个跨度，它就是一行中的第一个跨度;
如果它在集合中是最后一个，它就是一行中的最后一个;
否则观察从顶部开始的偏移，一旦它发生变化，你知道它在一个新的行中，所以当前索引的跨度是一行中的第一个，它的前一个兄弟是前一行的最后一个。

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;
    }
});

http://jsfiddle.net/nshk5cvd/19/

Answer 2

$( "h2 a" ).each(function() {
    $(this).children("span:first");//this is first span of this line
    $(this).children("span:last");//this is last span of this line
});

Answer 3

有几种方法可以做到这一点。 $ .each函数在括号中为您提供了一个计数器：

http://jsfiddle.net/nshk5cvd/13/

//Solution 1
$( "h2 a span" ).each(function(i) {
    if (i == 0 || i == $("h2 a span").length - 1)
    {
        console.log( $( this ).position() );
    }
});

//Solution 2
console.log($( "h2 a span" ).first().position());
console.log($( "h2 a span" ).last().position());

Answer 4

var first_span = $( "h2 a span:first" );
var last_span = $( "h2 a span:last" );

缓存元素始终是性能的好主意。

小提琴：http://jsfiddle.net/bu82170f/1/

找到一行的第一个和最后一个跨度

4 个答案: