Jquery，身高不是一个功能

Question

我试图通过这种方式获得div的最终高度：

$( document ).ready(function() {
  var cards = $(".card-group > .col-md-2");
  for(a=0; a< cards.length; a++){
    console.log(cards[a].height());
  }
});

我收到此错误：

jQuery.Deferred exception：cards [a] .height不是函数TypeError：cards [a] .height不是函数

一切似乎都很好，当我输出时：console.log(cards[a])它打印出应该的元素但是当它达到高度我有这个问题所以包括jquery。

PS：我已经搜索了网络和stackoverflow。类似的问题在不同的背景下，并没有帮助我。他们中的大多数都是错误的或根本不包括jquery文件

Answer 1

cards[a]与cards.get(a)相同。两者都返回给定索引处的DOM节点（没有.height()方法）。

.get()方法授予对每个jQuery对象下面的DOM节点的访问权限。如果index的值超出范围 - 小于元素的负数或等于或大于元素的数量 - 则返回undefined。

您可以使用.eq()代替：

给定一个表示一组DOM元素的jQuery对象，.eq()方法从该集合中的一个元素构造一个新的jQuery对象。提供的索引标识该元素在集合中的位置。

$(document).ready(function () {
    var cards = $(".card-group > .col-md-2");

    for (a = 0; a < cards.length; a++) {
        console.log(cards.eq(a).height());
    }
});

$(document).ready(function() {
  var cards = $(".card-group > .col-md-2");

  for (a = 0; a < cards.length; a++) {
    console.log(cards.eq(a).height());
  }
});

.card-group {
  width: 100%;
}

.col-md-2 {
  width: 33%;
  float: left;
  border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-group">
  <div class="col-md-2">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <div class="col-md-2">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="col-md-2">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
  </div>
</div>

或者使用.each()而不是显式循环

.each()方法旨在使DOM循环结构简洁且不易出错。调用时，它会迭代属于jQuery对象的DOM元素。每次回调运行时，都会从0开始传递当前循环迭代。更重要的是，回调是在当前DOM元素的上下文中触发的，因此关键字this引用该元素。

$(document).ready(function () {
    var cards = $(".card-group > .col-md-2");

    cards.each(function() {
        var card = $(this);
        console.log(card.height());
    });
});

$(document).ready(function() {
  var cards = $(".card-group > .col-md-2");

  cards.each(function() {
    var card = $(this);
    console.log(card.height());
  });
});

.card-group {
  width: 100%;
}

.col-md-2 {
  width: 33%;
  float: left;
  border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-group">
  <div class="col-md-2">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <div class="col-md-2">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="col-md-2">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
  </div>
</div>