如何使用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& amp;显示= 1"]]< div class ="story-entry">< div class =内容">{{Story}}</div>< div class =选手名称">-{{First Name}} {{Initial}}</div></div>[/sheetdb] 

div用于在页面上显示列的CSS.

  .story-entry {边距:15px 10px;边框:纯色1px黑色；填充:10px 20px;宽度:calc(50％-22px);向左飘浮;}<?php $ story = get_field('story');?>< div class =竞赛故事">< div class ="wrap-x">< div class ="inside">< div class ="row">< div class ="contest-story-text col col-xs-12"<?php echo do_shortcode($ story);&& lt;/div></div></div></div></div> 

列的问题是它们具有相同的高度，从而导致多余空间的不必要浪费.我掌握了动态找出两列的最大高度并将它们都设置为最大高度的逻辑.

通过下面的jQuery代码，我试图使用它来设置两列的高度.

  $(document).ready(function(){var maxHeight = 0;var entryNumber = 1;var prevEntrySelector = null;$(.story-entry").each(function(){警报('你好');如果($(this).height()> maxHeight){maxHeight = $(this).height();}如果(((entryNumber％2)== 0){//偶数输入.//将上一个条目的高度和该条目的高度设置为maxHeight.$(this).height(maxHeight);prevEntrySelector.height(maxHeight);//this-此选择器-此故事条目maxHeight = 0;}prevEntrySelector = $(this);entryNumber ++;});$(.entry-selector").height(maxHeight);}); 

此代码不适用于

这是我的页面希望通过jQuery看起来像此.

此页面的完整模板代码:

 <?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 =行mb0 pt pb"><?php if($ image):?>< div class ="col col-xs-12 col-md-2 col-lg-2 mb0&"><图片><源媒体=(最大宽度:480px)"srcset =''''<?php echo($ image ['sizes'] ['small']);?>><源媒体=(最大宽度:1024像素)"srcset =''''<?php echo($ image ['sizes'] ['medium']);?>><源媒体=(最大宽度: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'];?>"/></图片></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;万一;?></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">分享您自己的故事< a href ="<?php echo $ link_to_contest;&& quot; HERE</a></div></div></div></div></div>**< div class =竞赛故事">< div class ="wrap-x">< div class ="inside">< div class ="row">< div class ="contest-story-text col col-xs-12"<?php echo do_shortcode($ story);&& lt;/div></div></div></div></div> **<?php get_footer();?> 

解决方案

您可以使用CSS只需添加这些行

  .contest-story-text>div {显示:flex;flex-direction:行；flex-wrap:包装;宽度:100％;}.story-entry {高度:自动！重要}@仅限纯媒体屏幕和(最大宽度:600像素){.story-entry {宽度:calc(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屋！