Javascript 如何使用jQuery将这两列的高度设置为它们中的最高值？

sheetdb插件从共享的googlesheet中提取数据，并将其显示在WordPress网站上。该页面只显示Google表单中的动态内容。这是一个简单的页面。下面是WordPress页面编辑器中的自定义字段内容。这就是通过模板在页面上打印数据的方法（在本文末尾添加了代码）

此代码在第页上不起作用。下面是参考页

到目前为止，我所做的如下所示，内容后面有不必要的空间

这是我想让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="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(); ?>

" />
分享你自己的故事
**
**

您可以使用css 只要加上这些线

.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和插件sheetdb的eventhandler完成了它

window.addEventListener("sheetdb-downloaded", function() {
  var maxHeight = 0;
    var entryNumber = 1;
    var prevEntrySelector = null;
    $(".story-entry").each(function(index) {
    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
      console.log( "Height: " + maxHeight );
      maxHeight = 0;
    }
    prevEntrySelector = $(this);
    entryNumber ++;
    return true;
    });
    $(".entry-selector").height(maxHeight);
});

---

我没有看到与jquery相关的html。哪里是

story entry

它在帖子的最顶端。你jquery说

$（“.story entry”）

但是在顶部写着

竞赛条目行

。我找不到任何类

故事条目

的元素，只有一个类

故事条目

的css表示歉意。现在用最新的代码编辑了这篇文章。我得到了三个环境，并从一个有旧代码的环境复制了代码。这是我尝试使用dyna的页面mically将两列的最高高度都设置为两列。令人惊讶的是，您不仅解决了主要问题，还解决了移动响应问题。非常感谢。我也对如何使用jQuery来实现这一点感兴趣。您能研究一下吗？虽然我找到了基于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="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(); ?>

.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
    }
}

window.addEventListener("sheetdb-downloaded", function() {
  var maxHeight = 0;
    var entryNumber = 1;
    var prevEntrySelector = null;
    $(".story-entry").each(function(index) {
    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
      console.log( "Height: " + maxHeight );
      maxHeight = 0;
    }
    prevEntrySelector = $(this);
    entryNumber ++;
    return true;
    });
    $(".entry-selector").height(maxHeight);
});