Question

我希望得到确切的距离：

#main div使用class="b"
在第一个div与class =“b”之间，第二个div与class =“b”

请注意，div可以随机放置，div可以是固定位置，因此两个div之间可能存在间隙。在这种情况下，使用class= a的所有div数的宽度计算都不会成为解决方案。

<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

在这里，您可以使用DOM元素的offsetTop属性。

代码应该是，

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

或纯jQuery看起来像

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

现在为了获得连续div之间的距离，你可以在$（＆＃34; .main b＆＃34;）元素上写一个简单的for循环

＆＃13;

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

＆＃13;

<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>

＆＃13;

另外fiddle

获取多个div之间的距离（水平距离，即左边框到右边框 - 以像素为单位）

1 个答案: