Найти первый и последний диапазон строк

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/

Скрипка показывает мое левое позиционирование для каждого диапазона, мне просто нужна помощь в поиске hte f первый и последний пролет на каждой линии.

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

Кэширование элементов всегда хорошая идея для исполнения.

Fiddle: http://jsfiddle.net/bu82170f/1/