Получить расстояние (расстояние по горизонтали т.е. левой границы направо - в пикселях) между несколькими дивы

Question

Я хотел, чтобы получить точное расстояние между:

1. #main ДИВ покинул границу первого DIV с class="b"
2. между первым div с классом = "b" на второй div с классом = "b"

Обратите внимание, что div могут быть помещены случайным образом, а divs могут быть фиксированными позициями, поэтому между двумя div могут быть промежутки. Расчеты, такие как ширина всего числа div с class= a, не будут решением в этом случае.

<div class="main"> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="a"></div> 
    <div class="a"></div> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="a"></div> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 

То, что я попытался это:

$(".main").children(".a").each(function() { 
     $(this).nextUntil(".b").length /* basically this width I need I guess */ 
     console.log($(this).siblings(".b").prev(".a").html()); 
     var diff = $(this).offset().top - $(this).nextUntil(".b").offset().top 
     // here both values are same so result is zero   
console.log('diff' + diff); 
    }); 

Answer 1

Здесь Вы можете использовать offsetTop свойство элемента DOM.

код должен быть,

$(".main b")[0].offsetTop 

или чистый JQuery будет выглядеть

$(".main b").offset().top // This will return top offset of the first selector matching element 

Теперь, чтобы получить расстояние между последовательными дивами, вы можете написать простой цикл более $ (». Основные б «) элементы

var elements = $(".main .b"); 
 
var offsets = []; // Array which saves offsets of elements 
 
var distance = []; // Array which saves distance between each elements 
 
for (var i = 0; i < elements.length; i++) { 
 
    var offset = $(elements[i]).offset().top; 
 
    offsets.push(offset); 
 
    if (i == 0) { 
 
    distance.push(offset); 
 
    } else { 
 
    distance.push(offset - distance[i - 1]); 
 
    } 
 
} 
 

 
console.log(offsets); 
 
console.log(distance);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="a">some</div> 
 
    <div class="b">some</div> 
 
    <div class="a">some</div> 
 
    <div class="a">some</div> 
 
    <div class="a">some</div> 
 
    <div class="b">some</div> 
 
    <div class="a">some</div> 
 
    <div class="a">some</div> 
 
    <div class="b">some</div> 
 
</div>

также fiddle