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

附言：这里是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打印到控制台。