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()方法授予对每个基础下的DOM节点的访问权限 jQuery对象。如果索引的值超出范围 - 小于负数元素或等于或大于数量元素 - 它返回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());
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

或使用.each()代替显式循环

.each()方法旨在使DOM循环结构简洁并且不易出错。调用时，它遍历DOM元素这是jQuery对象的一部分。每次回调运行时，它都是从0开始传递当前循环迭代。更重要的是，回调是在当前DOM元素的上下文中触发的，所以关键字this指的是元素。

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

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

＆＃13;

$(document).ready(function() {
  var cards = $(".card-group > .col-md-2");

  cards.each(function() {
    var card = $(this);
    console.log(card.height());
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery，身高不是一个功能

1 个答案: