Question

当我在一行中编辑文本时，此JQuery代码会与所有".container"个DIV进行对话，并且每行的高度相等。

我只在一行中需要它（其他行在框中不需要这个空格）我需要在此行中"growing up"如何编辑更多文本 - 而不是在其他行中< / p>

不同的div-classes，flexbox和表格不是我工作的解决方案 - 我需要补充我的JQuery代码

这是我的JQuery：

$(document).ready(function(){
   $('.box').each(function() {  
        var highestBox1 = 0;
        $('.container').each(function(){
            if($(this).height() > highestBox1) 
               highestBox1 = $(this).height(); 
        }).height(highestBox1);  
   });    
});

谢谢！

Answer 1

您还没有说过如何识别您希望与之合作的特定容器div，但如果您没有任何其他信息（其他类等），就像您在问题中所说的那样，你可以回到它的位置：页面上有哪个.container元素？

$('.container:eq(0)')
// or
$('.container').eq(0)

...将选择第一个，或者您当然可以使用更大的索引（1,2,3）来选择其他索引。

例如：

    var containers = $('.container');
    containers.each(function(){

        if($(this).height() > highestBox1) 
           highestBox1 = $(this).height(); 
    });
    containers.eq(4).height(highestBox1);

...只会将第五个容器设置为循环确定的高度。

Answer 2

如果我理解正确，您需要在每个.container中均衡第一个.box的高度。然后你可以这样做：

var height=0;
var elms = $(".container").filter(function(){
  var $siblings = $(this).parent().find(".container");
  var index = $(this).index($siblings);
  if(index==0){
    height = ($(this).height() > height)?$(this).height():height;
    return true;
  }
  else return false;
});
elms.height(height)

Demo

更新（根据评论）

var heights=[];
$(".container").each(function(){
 var $siblings = $(this).parent().find(".container");
 var index = $siblings.index($(this));
if(!heights[index])
    heights[index]= $(this).height();
else
    heights[index] = ($(this).height() > heights[index])? $(this).height():heights[index];
});

$(".container").each(function(){
  var $siblings = $(this).parent().find(".container");
  var index = $siblings.index($(this));
  $(this).height(heights[index]);
});

JQuery代码只处理一个DIV行 - 等高度列DIV

2 个答案:

Demo