如何让javascript循环遍历同一个类的几个div

Question

这是问题的样子：

（对不起语言。如果你好奇的话，这是波兰语）

所以基本上我有一个基于bootstrap的代码，它工作得很好，在不同的设备上看起来不错，但是每个标题的字数都不同，所以当我调整屏幕大小时，线条明显断裂，标题的高度变大，这使图标和段落向下移动。 它看起来不太好看。 令人高兴的是，来自stackoverflow的一个非常好的陌生人帮助我克服了这一点。 使用这样的代码：

$(window).resize(function () {
    var heig1 = $(".pad1").height();
    var heig2 = $(".pad2").height();
    var heig3 = $(".pad3").height();
    var lrg = Math.max(heig1, heig2, heig3);
    if (lrg == heig1){
        $(".pad2,.pad3").height(lrg);
    }
    else if(lrg == heig2){
        $(".pad1,.pad3").height(lrg);
    }
    else{
        $(".pad1,.pad2").height(lrg);
    }
});

哪个工作正常，但只有一行，我有4个。 有没有办法让这个代码遍历每一行并改变每个标题的高度？ 我尝试过使用.each，但它没有做任何事情。 也许这是我的错。

/* .wi class gives icons their color and size */

.wi {
    font-size:2em!important;
    color:#ffb300;
    width:62px;
    margin-right:5px;
}

.marg {
    margin-top:30px;
    margin-bottom:30px;
}

.works h3 {
    font-size:0.95em;
    color:rgb(52, 73, 94);
    vertical-align:middle;
    display: table-cell;
    width:inherit;
}

.text-icon {
    margin-top:15px;
    overflow:hidden;
}

p4 {
    color:rgb(136, 138, 140);
    text-transform:none;
    font-size:0.6em;
    font-weight:normal;
    display:inline-block;
    width:72%;
    vertical-align:top;
    padding-top:5px;
    max-width:474px;
}

.more {
    font-size:0.38em;
    float:right;
    margin-right:5px;
    margin-top:7px;
}

<div class="row">
    <div class="col-md-4 marg">
        <h3 class="pad1"> Instrukcja bezpieczeństwa pożarowego  <br> </h3>
        <div class="text-icon"> 
            <i class=" fa fa-fire-extinguisher wi" aria-hidden="true"> </i>
            <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p4>    
            <div class="more"> Czytaj więcej... </div>
        </div>
    </div>
    <div class="col-md-4 marg">
        <h3 class="pad2">Wnioski o dofinansowanie z ZUS </h3>
        <div class="text-icon">  
            <i class=" fa fa-dollar wi" aria-hidden="true"> </i> 
            <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p4>  
            <div class="more"> Czytaj więcej... </div>
        </div>
    </div>
    <div class="col-md-4 marg">
        <h3 class="pad3"> Dobór środków ochrony indywidualnej  <br> </h3>
        <div class="text-icon"> 
            <i class=" fa  fa-umbrella wi" aria-hidden="true"> </i> 
            <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p4>  
            <div class="more"> Czytaj więcej... </div> 
        </div>
    </div>
</div>
<!-- <i class> stands for an icon from fontawesome -->

Answer 1

1. 摆脱那些有趣的1, 2, 3课
2. 你错过了处理你的元素高度准备好了
3. 确保使用有效的HTML元素，因为<p4>不是一个

您可以创建一个data-sameheight="h3"属性，您可以将其分配给所需的父级，其中h3可以是您要定位的任何选择器。

只需要这个脚本就可以了：

 function sameheight( $el ) { $el.css("height", "auto").height(Math.max.apply(null, $el.map(function(){ return $(this).height(); }).get())); } $("[data-sameheight]").each(function(){ var $el = $(this).find($(this).data("sameheight")); $(window).on("load resize", function(){ sameheight($el); }); sameheight($el); }); 

 .row{margin: 0 auto;width:90%;} .col-md-4{float:left;width:33.333%;} h3{background: orange;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row" data-sameheight="h3"> <div class="col-md-4 marg"> <h3> Instrukcja bezpieczeństwa pożarowego</h3> </div> <div class="col-md-4 marg"> <h3>Wnioski o dofinansowanie z ZUS <br> lorem <br> ipsum</h3> </div> <div class="col-md-4 marg"> <h3> Dobór środków ochrony indywidualnej</h3> </div> </div> <div class="row" data-sameheight="h3"> <div class="col-md-4 marg"> <h3> Instrukcja bezpieczeństwa pożarowego</h3> </div> <div class="col-md-4 marg"> <h3> Dobór środków ochrony indywidualnej</h3> </div> <div class="col-md-4 marg"> <h3>Wnioski o dofinansowanie z ZUS <br> lorem <br> ipsum <br> super <br> yey</h3> </div> </div> 

---

解释：

// Make target elements the same height
function sameheight( $el ) {
  $el
    // temporarily set height to "auto"
    .css("height", "auto") 
    // find all heights and set all heights to the "max" one
    .height(Math.max.apply(null, $el.map(function(){
        return $(this).height();
    }).get()));
}
// Target all data-sameheight parent elements
$("[data-sameheight]").each(function() {

  // get the selector from the data attribute
  // and go find those elements
  var $el = $(this).find($(this).data("sameheight"));

  // Trigger our sameheight() function on load and resize...
  $(window).on("load resize", function(){
    sameheight($el);
  });

  // ...and when ready
  sameheight($el);
});

谁需要JS ？ 如果您的目标浏览器是较新的版本，您可以查看
使用Flex的高度相同

Answer 2

这很可能是因为您没有针对您的元素，因为提供的代码可以帮助您解决问题。 因此，如果你在each循环的jQuery中复制/粘贴它，你最终总是在第一行工作。

尝试做这样的事情

$('.row').each(function( i, row ){

     var $pad1 = $( row ).find(".pad1"),
         $pad2 = $( row ).find(".pad2"),
         $pad3 = $( row ).find(".pad3"),

         h1 = $pad1.height(),
         h2 = $pad2.height(),
         h3 = $pad3.height(),

         max_height = Math.max( h1, h2, h3 );

    if( max_height == h1 ){
       $pad2.add( $pad3 ).height( h1 );
    }
    if( max_height == h2 ){
       $pad1.add( $pad3 ).height( h2 );
    }
    if( max_height == h3 ){
       $pad1.add( $pad2 ).height( h3 );
    }

});

Answer 3

用户@Deep推出了这样的代码，结果证明它完美无缺

$(window).resize(function () {
        $(".working").each(function(){
         var heig1 = $(".pad1",$(this)).height();
         var heig2 = $(".pad2",$(this)).height();
         var heig3 = $(".pad3",$(this)).height();
         var lrg = Math.max(heig1, heig2, heig3);
         if(lrg == heig1){
             $(".pad2,.pad3",$(this)).height(lrg);
         }
         else if(lrg == heig2){
             $(".pad1,.pad3",$(this)).height(lrg);
         }
         else{
             $(".pad1,.pad2",$(this)).height(lrg);
         }
        });
   });