选择多个元素 height();答案

【问题标题】：Selecting Multiple Elements height();选择多个元素 height();
【发布时间】：2016-06-03 19:49:47
【问题描述】：

我只是想知道为什么这个 jQuery 不起作用：

hdr = $('.header-wrapper, #top-bar, #new-showroom-header').height();

如您所见，我正在尝试获取多个元素的高度并将它们全部存储在我的变量中。我希望 jQuery 将所有元素的高度加在一起以创建最终值，但是当我 console.log 变量 hdr 时，我得到了选择的第一个元素的高度。

知道如何全选并将它们存储到我的 var 中吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

使用$.each() 得到高度的总和。

var hdr = 0;
$('.header-wrapper, #top-bar, #new-showroom-header').each(function () {
    hdr += $(this).height();
});

FIDDLE DEMO

【讨论】：

反对者请查看演示。让我知道你的 cmets。

【解决方案2】：

不，你不能使用 .height(); 获得所有元素的高度；功能首先你在集合中应用 $.each() 循环然后你可以一个一个地得到高度以下代码可以帮助您

$.each($('.header-wrapper, #top-bar, #new-showroom-header'),function(ind,item){
 var Height = $(item).height();
});

【讨论】：

【解决方案3】：

您可以为此场景编写一个 jQuery 插件。 :)

以下代码将根据提供的选择器返回一个高度数组。

[20,30,80]

jQuery 插件

(function($) {
  $.fn.heights = function() {
    return this.map(function() {
    	return $(this).height();
    }).toArray();
  };
}(jQuery));

var heights = $('.header-wrapper, #top-bar, #new-showroom-header').heights();

document.body.innerHTML = JSON.stringify(heights); // [20,30,80]

body                 { font-family: monospace; white-space: pre; }
.header-wrapper      { height: 20px; }
#top-bar             { height: 30px; }
#new-showroom-header { height: 80px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="page-wrapper">
  <div class="header-wrapper"></div>
  <div id="top-bar"></div>
  <div id="new-showroom-header"></div>
</div>

或者，您可以构建一个高度缓存以及它们的选择器。

{
  "html>body>div>.header-wrapper": 20,
  "html>body>div>#top-bar": 30,
  "html>body>div>#new-showroom-header": 80
}

(function($) {
  $.reduce = function(arr, fn, initVal) {
    if (Array.prototype.reduce) { return Array.prototype.reduce.call(arr, fn, initVal); }
    $.each(arr, function(i, val) { initVal = fn.call(null, initVal, val, i, arr); });
    return initVal;
  };
  $.fn.heights = function() {
    return $.reduce(this, function(map, el) {
      map[$(el).fullSelector()] = $(el).height();
      return map;
    }, {});
  };
  $.fn.fullSelector = function() {
    var sel = $(this)
      .parents()
      .map(function() { return this.tagName.toLowerCase(); })
      .get()
      .reverse()
      .concat([this.nodeName])
      .join(">");
    var id = $(this).attr('id'); if (id) { sel += '#' + id; };
    var cls = $(this).attr('class'); if (cls) { sel += '.' + $.trim(cls).replace(/\s/gi, '.'); };
    return sel;
  }
}(jQuery));

var heights = $('.header-wrapper, #top-bar, #new-showroom-header').heights();

document.body.innerHTML = JSON.stringify(heights, null, 2);

body                 { font-family: monospace; white-space: pre; }
.header-wrapper      { height: 20px; }
#top-bar             { height: 30px; }
#new-showroom-header { height: 80px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="page-wrapper">
  <div class="header-wrapper"></div>
  <div id="top-bar"></div>
  <div id="new-showroom-header"></div>
</div>

selector algorithm 的功劳归Jesse Gavin。

【讨论】：