I am trying to find the precise distance between :
#maindiv left edge to the first div withclass="b"- between the first div with class="b" to the second div with class="b"
It's worth noting that the divs may be arranged randomly and could have fixed positions, leading to gaps between them. Simply calculating the width of all the divs with class="a" won't provide a solution in this scenario.
<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>
My current approach:
$(".main").children(".a").each(function() {
$(this).nextUntil(".b").length /* I believe this gives me the required distance */
console.log($(this).siblings(".b").prev(".a").html());
var diff = $(this).offset().top - $(this).nextUntil(".b").offset().top
// in this case, the two values are the same, resulting in zero
console.log('diff' + diff);
});