javascript JQuery 获取子元素的最高高度并放入父元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13332833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery get tallest height of child and put into parent element
提问by Danny Englander
In a previous question, I set Equal heights on individual <li>tags from UL groups on a page. But now I realize for better theming, I'd like to take the tallest height set on a group of <li>tags within a UL group and set that to its respective parent <ul>itself specifically for better theming of my page. I have a new fiddlehere where I try to find the tallest height of an <li>within a UL group and set it to the UL.
在上一个问题中，我<li>为页面上 UL 组的各个标签设置了等高。但现在我意识到为了更好的主题化，我想<li>在 UL 组内的一组标签上设置最高的高度，并将其设置为其各自的父级<ul>本身，专门为我的页面更好地主题化。我在这里有一个新的小提琴，我尝试<li>在 UL 组中找到最高的高度并将其设置为 UL。
The issue still is specificity. The tallest height of the the <li>from the first UL group is being set to all <ul>tags on the page. The height of the tallest <li>in UL group (row 1) is 260px and the height from Row 2 is 156px. However, 260px is still being set to both UL tags on the page. The ULs will grow upon the page so I'd like the code to be extensible without having to specify each row in JQuery. So far I have tried this:
问题仍然是特异性。<li>来自第一个 UL 组的最高高度被设置为<ul>页面上的所有标签。<li>UL 组中最高的（第 1 行）的高度为 260px，第 2 行的高度为 156px。但是，页面上的两个 UL 标记仍设置为 260px。UL 将在页面上增长，因此我希望代码可以扩展，而不必在 JQuery 中指定每一行。到目前为止，我已经尝试过这个：
// get the height of the tallest LI within each UL group
var max = Math.max.apply(Math, $(".item-list ul li").map(
function(){
return $(this).height();
}
));
// now render the height in each parent UL
$(".item-list ul").each(function() {
$(this).find(".item-list ul").height(max);
});
... but the second part does not work. This works but...
...但第二部分不起作用。这有效，但...
$(".item-list ul").height(max);
... it puts the height of the tallest <li>on the pages for all UL tags. Ideally the final HTML should be:
... 它会<li>在所有 UL 标签的页面上放置最高的高度。理想情况下，最终的 HTML 应该是：
<div class="item-list row-1">
<ul style="height: 260px;">
etc...
<div class="item-list row-2">
<ul style="height: 156px;">
etc...
Working versionbased on this onebelow
回答by I Hate Lazy
If I understand you correctly, you should do the maxoperation in the .each()loop.
如果我理解正确，您应该max在.each()循环中进行操作。
function thisHeight(){
return $(this).height();
}
$(".item-list ul").each(function() {
var thisULMax = Math.max.apply(Math, $(this).find("li").map(thisHeight));
$(this).height(thisULMax);
});
I also made the map function a named function so you can reuse it.
我还使 map 函数成为一个命名函数，以便您可以重用它。
Here are a couple more solutions that are a little cleaner.
这里有几个更简洁的解决方案。
This one passes a function to height()to use it as the iterator. Shortens things a bit.
这一个传递一个函数来height()使用它作为迭代器。缩短一些东西。
function thisHeight(){
return $(this).height();
}
$(".item-list ul").height(function() {
return Math.max.apply(Math, $(this).find("li").map(thisHeight));
});
Here's another way using .reduce(), though it needs a shim for IE8 and lower.
这是使用 的另一种方法.reduce()，尽管它需要一个适用于 IE8 及更低版本的垫片。
function maxHeight(max, elem) {
var h = $(this).height();
return max > h ? max : h;
}
$(".item-list ul").height(function() {
return $(this).find("li").toArray().reduce(maxHeight, 0);
});
回答by adeneo
Seems to complicated ?
好像很复杂？
$(".item-list ul").each(function(idx, elm) {
var LIheight = 0;
$('li', elm).each(function() {
if ($(this).height() > LIheight) LIheight = $(this).height();
}).height(LIheight);
});
回答by Kevin Murani
Since you have two <ul>tags of class '.item-list' why not try this instead:
既然你有两个<ul>“.item-list”类的标签，为什么不试试这个：
$(".item-list ul").eq(0).height(max);
This will only set the height for the first tag in your HTML.
这只会设置 HTML 中第一个标签的高度。
