JQuery代码地址只有一个DIV行-等高列DIV

JQuery Code to adress only one DIV Row - Equal Height Colums DIV

本文关键字:DIV 高列 有一个 代码 地址 JQuery      更新时间:2023-09-26

这是我的JQuery问题

这个JQuery代码与所有的".container" DIV对话,当我在一行中编辑文本时,在每一行中设置相等的高度。

我需要它在一行(其他行不需要这个空格在框中)我需要这个"growing up"在这一行我如何编辑更多的文本-不在其他

不同的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);  
   });    
});

谢谢!

如果我理解正确的话,您需要在每个.box中单独平衡第一个.container的高度。然后你可以这样做:

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)

演示

(/评论)

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]);
});
演示

你还没有说你如何识别一个特定的容器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);  

…将第五个容器的高度设置为由循环决定的