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 is not a function TypeError: cards[a].height is not a function

一切似乎都很好，当我只输出时：console.log(cards[a]) 它按应有的方式打印出元素，但是当涉及到高度时，我遇到了这个问题，所以包含了 jquery。

PS: 我已经在网上和Whosebug上搜索过了。类似的问题在不同的上下文中，对我没有帮助。他们中的大多数要么打错了，要么根本不包括 jquery 文件

Answer 1

cards[a] 等同于 cards.get(a)。 return 给定索引处的 DOM 节点（没有 .height() 方法）。

The .get() method grants access to the DOM nodes underlying each jQuery object. If the value of index is out of bounds — less than the negative number of elements or equal to or greater than the number of elements — it returns undefined.

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

Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set.

$(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() 而不是显式循环

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

$(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>

Jquery, 高度不是函数

Jquery, height is not a function

jquery

height