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

时间：2016-07-10 16:45:05

标签： javascript jquery html css twitter-bootstrap

问题出在哪里：row

（对不起语言。如果你有点好奇，那就是波兰语）

所以基本上我有一个基于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 -->

3 个答案:

答案 0 :(得分：2)

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

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

    完全不需要这个脚本：

    ＆＃13;
    ＆＃13; 
    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);
});
    ＆＃13; 
    .row{margin: 0 auto;width:90%;}
.col-md-4{float:left;width:33.333%;}
h3{background: orange;}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    说明：

    // 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 ？如果您的目标浏览器是较新版本，您可以查看
    same height using Flex

答案 1 :(得分：1)

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

尝试做这样的事情

$('.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 );
    }

});

答案 2 :(得分：0)

用户@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);
         }
        });
   });
相关问题
最新问题