[英]jQuery: How to set max height of 3 'h3' element under a specific DIV to all h3 element?
The code snippet below is a part of a WordPress
page being developed.下面的代码片段是正在开发的
WordPress
页面的一部分。 I need to set heights of all the 4 h3
elements to the highest of them using jQuery
.我需要使用
jQuery
将所有 4 个h3
元素的高度设置为它们中的最高值。 Could anyone please help me fix the jQuery
function below to do this?任何人都可以帮我修复下面的
jQuery
函数来做到这一点吗?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> $(document).ready(function() { var highestBox = 0; $('.fast-easy-order .color-tan-bright').each(function() { if ($(this).height() > highestBox) { highestBox = $(this).height(); } }); $('.fast-easy-order h3').height(highestBox); }); </script> <div class="fast-easy-order"> <div class="relative flex-content-row flex-id-icon_columns"> <div class="icon-column-repeater mt-row"> <div class="wrap-x"> <div class="inside"> <div class="row center-xs"> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Address_Collection.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">DEDICATED GIFT CONCIERGE</h3> <article class="mt"> <p>We connect you with a personal assistant to find the perfect gift for any occasion</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Custom_Branding.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">CORPORATE BRANDING</h3> <article class="mt"> <p>We'll take care of the details by collecting all your recipients' addresses for effortless delivery</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Gift_Concierge.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">ADDRESS COLLECTION SERVICE </h3> <article class="mt"> <p>We'll take care of the details by collecting all your recipients' addresses for effortless delivery</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Order_Fulfillment.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">SEAMLESS ORDER FULFILLMENT</h3> <article class="mt"> <p>Send gifts to a conference location or drop-ship to 5,000 recipients — we'll handle it all for you</p> </article> </div> </div> </div> </div> </div> </div> </div>
This JQuery
statement will find all ocurrences of h3
within <div class="fast-easy-order">
and modify his height by using css()
method to get a computed style property of elements.这个
JQuery
语句将在<div class="fast-easy-order">
找到h3
所有出现,并通过使用css()
方法修改他的高度以获取元素的计算样式属性。
$(".fast-easy-order").find("h3").css("height","100%");
$(".fast-easy-order").find("h3").css("color","green");
<div class="fast-easy-order"> <div class="relative flex-content-row flex-id-icon_columns"><div class="icon-column-repeater mt-row"> <div class="wrap-x"> <div class="inside"> <div class="row center-xs"> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Address_Collection.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">DEDICATED GIFT CONCIERGE</h3> <article class="mt"><p>We connect you with a personal assistant to find the perfect gift for any occasion</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Custom_Branding.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">CORPORATE BRANDING</h3> <article class="mt"><p>We'll take care of the details by collecting all your recipients' addresses for effortless delivery</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Gift_Concierge.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">ADDRESS COLLECTION SERVICE </h3> <article class="mt"><p>We'll take care of the details by collecting all your recipients' addresses for effortless delivery</p> </article> </div> <div class="col col-xs-12 col-sm-8 col-md col-lg"> <div class="icon relative mb"> <div class="object-contain-wrap"> <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Order_Fulfillment.png" alt=""> </div> </div> <h3 class="mb0 h3 color-tan-bright">SEAMLESS ORDER FULFILLMENT</h3> <article class="mt"><p>Send gifts to a conference location or drop-ship to 5,000 recipients — we'll handle it all for you</p> </article> </div> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This could be achieved using CSS and flexbox styling if they are contained within the same container.如果将 CSS 和 flexbox 样式包含在同一个容器中,则可以使用它们来实现这一点。
If flexbox isn't possible due to the layout, for example h3 tags in different containers and unable to apply flexbox styles, Id take a look at using:如果由于布局而无法使用 flexbox,例如不同容器中的 h3 标签并且无法应用 flexbox 样式,请查看使用:
https://github.com/liabru/jquery-match-height https://github.com/liabru/jquery-match-height
Javascript: Javascript:
window.addEventListener("load", function () {
matchHeight('[data-mh="match"]');
});
window.addEventListener("resize", function () {
setTimeout(function () {
matchHeight('[data-mh="match"]');
});
});
const matchHeight = (element) => {
let tallest = 0;
const elements = [...document.querySelectorAll(element)];
elements.map((el)=> {
if (el.offsetHeight > tallest) {
tallest = el.offsetHeight
}
});
elements.map((el)=> {
el.style.height = tallest + 'px';
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.