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

Question

我有一张有很多行和 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

P.S:这里是 jQuery 的新手。请原谅我的愚蠢错误。

Answer 1

问题是从 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>

Answer 2

我检查了您的 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 对象。然后，当您在 $('td.elmCls')[0] 之类的对象上使用 [0] 时，您将返回一个本机 Javascript 节点/元素。该节点上没有 height() 方法，这就是您收到该错误的原因。

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