使用 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 functionPS：这里是 jQuery 的新手。原谅我愚蠢的错误。

Answer 1

问题是从 jQuery 选择器返回的值不是数组，所以你不能像数组一样遍历它们。您需要使用each()jQuery 函数来执行此操作。

您可以按如下方式执行此操作：

$('#elementId tbody tr td.elment-class-2 div').each(function(i, ) { 

    divHeight = $(divToCheck).height(); 

});

Thei是 the 的索引（另请注意，您不太可能在选择器中需要这种特殊性 - 它会使代码的可重用性降低并且更难以维护）

如果没有您的原始 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 对象。当您然后[0]像您一样在对象上使用时$('td.elmCls')[0]，您会取回本机 Javascript 节点/元素。height()该节点上没有方法，这就是您收到该错误的原因。

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