使用jQuery / getClientRects（）检测元素是否包装

debugcn 发表于 Dev

亚当琼斯

div仅当其中的span项目包装时，我才需要对它应用jQuery函数。我试图用确定，getClientRects()但它总是返回一行。您可以在下面的代码段中看到它。这里显然有什么问题吗？

jQuery(function() {
  var minimized_elements = $('.countLines');
  var maxLines = 1;
  
  minimized_elements.each(function() {
    var lineCount = $(this)[0].getClientRects().length;
    alert(lineCount);
  });
});

div {
  width: 70%;
  background-color: #898989;
}

span {
  display: inline-block;
  width: 30%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="countLines">
  <span>item 1</span><span>item 2</span><span>item 3</span><span>item 4</span><span>item 5</span><span>item 6</span>
</div>

罗里·麦克罗森（Rory McCrossan）

为了实现您所需要的功能，您可以取而代之地检索span元素顶部位置的唯一Set 。从那里您可以计算该Set中的值数量；这将是跨度的行数。尝试这个：

jQuery($ => {
  let lines = new Set($('.countLines span').map((i, el) => $(el).offset().top).get()).size;
  console.log(lines);
});

div {
  width: 70%;
  background-color: #898989;
}

span {
  display: inline-block;
  width: 30%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="countLines">
  <span>item 1</span><span>item 2</span><span>item 3</span><span>item 4</span><span>item 5</span><span>item 6</span>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。