[英]How to make javascript loop through few divs with the same class
Here's what the problem looks like: 这是问题的样子:
(Sorry about the language. It's Polish, if you're curious ) (对不起语言。如果你好奇的话,这是波兰语)
So basically I have a code based on bootstrap, it works pretty well, things look ok on different devices, but the amout of words differs in every header, so when I'm resizing the screen, the lines obviously break and header's height becomes larger, which makes the icon and the paragraph move down. 所以基本上我有一个基于bootstrap的代码,它工作得很好,在不同的设备上看起来不错,但是每个标题的字数都不同,所以当我调整屏幕大小时,线条明显断裂,标题的高度变大,这使图标和段落向下移动。 And it doesn't look very nice.
它看起来不太好看。 Happily, a very nice stranger from stackoverflow helped me overcome this.
令人高兴的是,来自stackoverflow的一个非常好的陌生人帮助我克服了这一点。 With code like this:
使用这样的代码:
$(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);
}
});
Which works fine, but only for one row and I've got 4 of them. 哪个工作正常,但只有一行,我有4个。 Is there a way to make this code loop through every row and change every header's height?
有没有办法让这个代码遍历每一行并改变每个标题的高度? I've tried using .each but it didn't do anything.
我尝试过使用.each,但它没有做任何事情。 Maybe it was my fault though.
也许这是我的错。
/* .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 -->
1, 2, 3
classes 1, 2, 3
课 <p4>
is not one <p4>
不是一个 You could create a data-sameheight="h3"
attribute you can assign to the desired parent, where h3
can be any selector you want to target. 您可以创建一个
data-sameheight="h3"
属性,您可以将其分配给所需的父级,其中h3
可以是您要定位的任何选择器。
Than this script is all you need: 只需要这个脚本就可以了:
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>
Explained: 解释:
// 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);
});
Who needs JS ? 谁需要JS ? If your target Browsers are newer versions you can take a look at
如果您的目标浏览器是较新的版本,您可以查看
same height using Flex 使用Flex的高度相同
It is most likely because you do not target your elements, as the code that was provided to help you doesnt. 这很可能是因为您没有针对您的元素,因为提供的代码可以帮助您解决问题。 So if you copy/pasted it inside a jQuery
each
loop, you ended up working always on the first row. 因此,如果你在
each
循环的jQuery中复制/粘贴它,你最终总是在第一行工作。
Try to do something like this 尝试做这样的事情
$('.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 );
}
});
User @Deep came out with code like this and it turned out to work perfectly 用户@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);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.