选择多个元素 height();
Selecting Multiple Elements height();
我只是想知道为什么这个jQuery不起作用:
hdr = $('.header-wrapper, #top-bar, #new-showroom-header').height();
如您所见,我正在尝试获取多个元素的高度并将它们全部存储在我的变量中。我希望jQuery将所有元素高度相加以创建一个最终值,但是当我控制台时.log变量hdr我得到了所选第一个元素的高度。
知道我如何选择全部并将它们存储到我的 var 中吗?
使用 $.each()
获取总高度总和。
var hdr = 0;
$('.header-wrapper, #top-bar, #new-showroom-header').each(function () {
hdr += $(this).height();
});
小提琴演示
你可以为这个场景编写一个jQuery插件。 :)
下面的代码将根据提供的选择器返回高度数组。
[20,30,80]
j查询插件
(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>
选择器算法的功劳归于杰西·加文。
不,你不能使用 .height() 获得所有元素的高度;函数首先你在集合中应用 $.each() 循环,然后你可以一个接一个地得到高度以下代码可帮助您
$.each($('.header-wrapper, #top-bar, #new-showroom-header'),function(ind,item){
var Height = $(item).height();
});
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- jQuery:希望隐藏元素的 height() 答案为 0
- 选择多个元素 height();
- 获取包含图像的元素的 $.height() 当图像可能尚未加载时
- 包含自定义字体文本的元素的jQuery height()似乎不一致
- jQueryUI.position()未命中用jQuery.height()设置的目标元素的高度
- 元素的宽度/高度可以小于min-width/min-height吗?
- 如何使用min/max-height和height为元素应用响应式CSS高度
- 在AngularJS中不使用指令获取元素属性(height/width)
- $(window).height()的值和元素宽度在加载和文档就绪时都是错误的
- 为什么width/height元素属性的呈现方式与inline/CSS样式不同
- 元素.height返回可见高度-我想要total
- jQuery height()函数对元素无效
- 无法在 JS 中访问元素的 style.height
- ngAnimate max-height在某些元素上不起作用