如何使用jQuery将两列的高度设置为它们中的最高值? [英] How to set the height of both the columns to the highest of them with jQuery?
问题描述
sheetdb 插件从共享的 googlesheet 中提取数据以在 WordPress 网站上显示它们.该页面只显示来自 googlesheet 的动态内容.这是一个简单的页面.以下是来自 WordPress 页面编辑器的自定义字段内容.这是通过模板在页面上打印数据的(代码添加在本文末尾)
[sheetdb url="https://sheetdb.io/api/v1/ymk583vab4dwh"搜索=批准=1&显示=1"]<div 类=故事条目"><div 类=内容">{{故事}} </div><div class=contestent-name">-{{First Name}} {{Initial}}</div></div>[/sheetdb]页面上显示列的 div 的 CSS.
.story-entry {边距:15px 10px；边框:纯色 1px 黑色；填充:10px 20px；宽度:计算(50% - 22px)；向左飘浮;}<?php $story = get_field('story');?><div class=比赛故事"><div 类=wrap-x"><div 类=内部"><div 类=行"><div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story);?></div></div></div></div></div>列的问题是它们具有相同的高度，从而导致不必要的额外空间浪费.我得到了动态找出两列的最大高度并将它们都设置为最大高度的逻辑.
我尝试使用下面的 jQuery 代码来设置两列的高度.
$(document).ready(function() {变量最大高度 = 0;var entryNumber = 1;var prevEntrySelector = null;$(".story-entry").each(function(){警报(你好")；if ($(this).height() > maxHeight) { maxHeight = $(this).height();}if ((entryNumber % 2) == 0) {//偶数入口.//设置前一个条目和这个条目的高度为 maxHeight.$(this).height(maxHeight);prevEntrySelector.height(maxHeight);//this - 这个选择器 - 这个故事条目最大高度 = 0；}prevEntrySelector = $(this);入口编号 ++;});$(".entry-selector").height(maxHeight);});此代码不适用于
此页面的完整模板代码:
你可以用css做只需添加这些行
.contest-story-text >分区{显示:弯曲；弹性方向:行；弹性包装:换行；宽度:100%；}.story-entry {高度:自动！重要；}@media only screen and (max-width: 600px) {.story-entry {宽度:计算(100% - 22px)！重要}}A sheetdb plugin pulls data from a shared googlesheet to display them on a WordPress site. The page displays nothing else but this dynamic contents from the googlesheet. It is a simple page. Below is custom field content from WordPress page editor. This is what prints data on the page via template(Code added at the end of this post)
[sheetdb url="https://sheetdb.io/api/v1/ymk583vab4dwh" search="Approval=1&Display=1"]
<div class="story-entry">
<div class="content"> {{Story}} </div>
<div class="contestent-name">-{{First Name}} {{Initial}}</div>
</div>
[/sheetdb]
CSS for the div displaying columns on the page.
.story-entry {
margin: 15px 10px;
border: solid 1px black;
padding: 10px 20px;
width: calc(50% - 22px);
float: left;
}
<?php $story = get_field('story'); ?>
<div class="contest-story">
<div class="wrap-x">
<div class="inside">
<div class="row">
<div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story); ?></div>
</div>
</div>
</div>
</div>
The problem with the columns is them having the same height resulting in unnecessary wastage of the extra space. I got the logic to dynamically find out the max height of the two columns and set both them to the max height.
With the following jQuery code I am trying to use to set the height to both the columns.
$(document).ready(function() {
var maxHeight = 0;
var entryNumber = 1;
var prevEntrySelector = null;
$(".story-entry").each(function(){
alert('Hello');
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
if ((entryNumber % 2) == 0) {
// Even entry.
// Set height of previous entry and this entry to maxHeight.
$(this).height(maxHeight);
prevEntrySelector.height(maxHeight);
// this - this selector - this story entry
maxHeight = 0;
}
prevEntrySelector = $(this);
entryNumber ++;
});
$(".entry-selector").height(maxHeight);
});
This code doesn't work on this page. Below is the reference page.
https://knackshops.com/pages/spread-joy-message
What I did so far is as seen below with unnecessary space after the content
This is the page that I want to make look like this with jQuery.
The full template code for this page:
<?php
$hero = get_field('hero');
$hero_h1 = $hero['hero_-_h1'];
$hero_h2 = $hero['hero_-_h2'];
$background = $hero['hero_-_background_options'];
$image = $background['background_-_image'];
$link_text = get_field('link_text');
$link_to_contest = get_field('link_to_contest');
$story = get_field('story');
?>
<?php get_header(); ?>
<div class="default-flex-hero relative">
<div class="inside">
<div class="row mb0 pt pb">
<?php if($image): ?>
<div class="col col-xs-12 col-md-2 col-lg-2 mb0">
<picture>
<source media="(max-width: 480px)" srcset="<?php echo($image['sizes']['small']); ?>">
<source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
<source media="(max-width: 1280px)" srcset="<?php echo($image['sizes']['large']); ?>">
<source srcset="<?php echo($image['sizes']['xlarge']); ?>">
<img src="<?php echo($image['sizes']['xlarge']); ?>" alt="<?php echo $image['alt']; ?>" />
</picture>
</div>
<?php endif; ?>
<div class="hero-col col col-xs-12 col-md-10 col-lg-10 mb0">
<h1 class="mb0 color-tan-dark">
<?php if( $hero_h1 ): echo $hero_h1; endif; ?>
</h1>
<?php if( $hero_h2 ): ?>
<h2 class="mb0 mt2 alt-heading h4">
<?php echo $hero_h2; ?>
</h2>
<?php endif; ?>
</div>
</div>
</div>
</div>
<div class="contest-link">
<div class="wrap-x">
<div class="inside">
<div class="row">
<div class="contest-link-text col col-xs-12">
SHARE YOUR OWN STORY <a href="<?php echo $link_to_contest; ?>">HERE</a>
</div>
</div>
</div>
</div>
</div>
**<div class="contest-story">
<div class="wrap-x">
<div class="inside">
<div class="row">
<div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story); ?></div>
</div>
</div>
</div>
</div>**
<?php get_footer(); ?>
You can do with css just add these line
.contest-story-text > div{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.story-entry {
height: auto !important;
}
@media only screen and (max-width: 600px) {
.story-entry {
width: calc(100% - 22px) !important
}
}
这篇关于如何使用jQuery将两列的高度设置为它们中的最高值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
