Javascript 使每两个元素的高度相同

Javascript 使每两个元素的高度相同,javascript,jquery,Javascript,Jquery,我有一个容器,里面有许多孩子,他们的身高必须相同,只有两人一对。 例如,第一个和第二个元素需要与两个元素中最高的元素一样高,第三个和第四个元素需要与最高的元素一样高,与第一个和第二个子元素的高度无关 我当前的代码,它等于所有儿童的身高 $(文档).ready(函数(){ //选择并循环要均衡的元素的容器元素 $('.parent')。每个(函数(){ //缓存最高的 var-highestBox=0; //选择并循环要均衡的元素 $('.child',this).each(函数(){ //如果

我有一个容器,里面有许多孩子,他们的身高必须相同,只有两人一对。 例如,第一个和第二个元素需要与两个元素中最高的元素一样高,第三个和第四个元素需要与最高的元素一样高,与第一个和第二个子元素的高度无关

我当前的代码,它等于所有儿童的身高

$(文档).ready(函数(){
//选择并循环要均衡的元素的容器元素
$('.parent')。每个(函数(){
//缓存最高的
var-highestBox=0;
//选择并循环要均衡的元素
$('.child',this).each(函数(){
//如果此框高于缓存的最高值,则将其存储
if($(this).height()>highestBox){
highestBox=$(this).height();
}
});
//把所有孩子的身高都定在最高的
$('.child',this).height(highestBox);
});
});

一些动态内容
一些动态内容
一些动态内容
一些动态内容
一些动态内容
一些动态内容

希望你能找到下面这样的东西。可能使用
flex
是最简单的方法。这里我尝试了一些jquery

$(文档).ready(函数(){
//缓存最高的
var-highestBox=0;
变量循环=1
//选择并循环要均衡的元素
$('.child',this).each(函数(){
如果(循环%2!=0){
//如果此框高于缓存的最高值,则将其存储
highestBox=$(this).height();
if($(this).next('.child').height()>highestBox){
highestBox=$(this.next('.child').height();
}
//把所有孩子的身高都定在最高的
$(此).高度(最高框);
$(this).next('.child').height(highestBox);
}
loop++;
});
});
.child{
宽度:50%;
浮动:左;
边缘底部:20px;
}

有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容
有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容
有些动态内容有些动态内容有些动态内容
一些动态内容
有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容
有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容有些动态内容
一些动态内容

您可能希望实现类似网格的行为,使用flexbox无需JavaScript即可轻松实现:

/*仅用于视觉外观*/
.家长{
宽度:300px;
}
.孩子{
背景:线性梯度(45度,浅绿色,黄色);
填充物:5px;
框大小:边框框;
}
/*实际逻辑*/
.家长{
显示器:flex;
柔性包装:包装;
对齐项目:拉伸;
}
.孩子{
弹性:150%;
}

一点文字
大量内容,使所有行的高度最大
a b c d e f g h i j k l m n o p q r s t u v w x y z
a、b、c

我不知道你想归档什么。您可以添加html和更好的解释(例如图像)预期结果应该是什么样子吗?您可以将成对的子项包装到FlexBox中,并使用
align items:stretch
请添加html。。。。“成对”是否被包装在一个元素中?@users3154108每两个元素包装一次并不是一个愚蠢的想法。在你的例子中,所有的孩子都有相同的高度。TS希望两人一组的高度相等。@LinkinTED你错了,我已经更新了答案来演示它