使用jQuery选择器获取div高度？

问题描述

我有一个表，其中有许多行和3列。每列内部都有div。我想在第二列中获取div的高度。 我给jQuery如下：

$('#elementId tbody tr td.elment-class-2 div').height(); // works good,returns height of first rows div

现在，我想循环运行此命令，以便获得第二列所有行中div的高度。因此，我编写了以下代码：

var count = $('#elementId tbody tr td.elment-class-2 div').length;
    $('#elementId tbody tr td.elment-class-2 div')[0]; //
    $('#elementId tbody tr td.elment-class-2 div')[1]; // and so on in a loop

但这会返回错误

$('#elementId tbody tr td.elment-class-2 div')[0]; // Uncaught TypeError: $(...)[0].height is not a function

附言： jQuery的新手。原谅我的愚蠢错误。

解决方法

问题是从jQuery选择器返回的值不是数组，因此您不能像数组那样遍历它们。您需要使用each() jQuery函数来做到这一点。

您可以按照以下步骤进行操作：

$('#elementId tbody tr td.elment-class-2 div').each(function(i,) { 
    divHeight = $(divToCheck).height(); 
});

i是 （还请注意，选择器不太可能需要这种特殊性，因为它会使代码的可重用性降低并且更难以维护）

在没有原始HTML的情况下，我只能在下面向您展示此工作的一般示例：

$('tr div').each(function(i,divToCheck) {
  divHeight = $(divToCheck).height();
  console.log("Div "+ i + " height = "+ divHeight);
});

td { border:1px solid grey;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><div>hello</div></td>
  </tr>
  <tr>
    <td><div style="height:30px;">hello </div></td>
  </tr>
  <tr>
    <td>
      <div style="font-size:20px">hello</div>
    </td>
  </tr>
</table>

,

我检查了您的CodePen，看来对于变量ht有一个错字，该类必须位于TD旁边，即td.elmCls，第二部分是代码：>

$(document).ready(function () {
  var ht = $('table tbody tr td.elmCls').height();
  console.log(ht)

  var divs = $('tbody tr td:nth-of-type(2) div');
  divs.each(function(index,elem) {
   console.log(elem.innerText);
   var height = $(elem).height();
   console.log(height);
  });
});

看到该错误的原因是，当您尝试通过$()方法获取对象时，它将首先返回jQuery对象。然后，在像[0]这样的对象上使用$('td.elmCls')[0]时，您将返回一个本机Javascript节点/元素。该节点上没有height()方法，这就是为什么会出现该错误的原因。

您可以使用.each(function(index,element){ [code-here]})方法解决此问题，然后只需将element.innerText打印到控制台即可。