[英]Loop through divs with same class and compare with divs from other class
[英]How to make javascript loop through few divs with the same class
(對不起語言。如果你好奇的話,這是波蘭語)
所以基本上我有一個基於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 -->
1, 2, 3
課 <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的高度相同
這很可能是因為您沒有針對您的元素,因為提供的代碼可以幫助您解決問題。 因此,如果你在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 );
}
});
用戶@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.