jQuery选择每个父母，抓取child1的高度并将child2设置为child1高度

Question

所以我有一个 php 脚本来从重复以下 HTML 的数据库中生成新闻/案例帖子

    <a href='/post/placeholder'>
  <div class='col nopadding col12-12 counter'>
    <div class='col col6-12 vheight'>
      <h2>placeholder</h2>
      <p>placeholder</p>
    </div>
    <div class='col col6-12 nopadding varheight '>
      <div class='imagewrapper'>
        <img src='/public/images/images/placeholder.jpg' />
      </div>
    </div>
  </div>
</a>

我想选择每个“计数器”类，并将 .vheight 的高度存储在一个变量中，以便 .varheight（图像）响应时始终保持相同的高度。

我目前有这个 JQuery

$(window).resize(function () {
  $( ".counter" ).each(function() {
    var $counter = $(this).next('.vheight').outerHeight(true);
    $(this).next(".varheight").css("height", $counter);
  });
});

$(window).load(function () {
  $( ".counter" ).each(function() {
    var $counter = $(this).next('.vheight').outerHeight(true);
    $(".varheight").css("height", $counter);
  });
});

我似乎无法让它工作，并查看了关于 SO 的其他类似答案。

这是测试开发链接，您可以查看它的外观

http://d53.6bdv.ws/cases

Answer 1

如果这是您想要做的事情，请尝试看看这个，如果它不适合您的需求，我们可以尝试进行更改。

$('.counter').each(function(){
  var myHieght = $(this).find('.vheight').height();
  $(this).find('.varheight').height(myHieght);
})

a{
  display: block;
  position: relative;
  float: left;
  width:250px;
} 
.varheight{
  position:relative
}
.imagewrapper{
  position:aboslute;
  height:100%;
  width:100%;
}
img{
  max-width:100%;
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com">
<div class='col nopadding col12-12 counter'>
    <div class='col col6-12 vheight'>
      <h2>placeholder</h2>
      <p>placeholder</p>
      <h2>placeholder</h2>
      <p>placeholder</p>
    </div>
    <div class='col col6-12 nopadding varheight '>
      <div class='imagewrapper'>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAAC8CAMAAAC672BgAAAANlBMVEXMzMyUlJTPz8/KysqSkpKdnZ2mpqahoaHIyMi5ubmXl5eZmZnCwsK0tLSxsbGioqKsrKy+vr7uUNzyAAADSklEQVR4nO3YW1PkIBCGYSCEnMjp///Z/bqTOK6jF1ZNrRX3fS6UQaLSoWmSEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+E+l9K6ZPh/xne67aQbn7bpsw9U9b3P/PLpXdz3bu1/YH7/k09G3U3OMMUfd2LRba/XeflJ7eppfHdUdB18FTetXVm+qNdaPo+9niGMrml+jAGhWi021eLP7sPZTF8cyxdE/KF66blII0uajp9tnSppzSUfGDzHuaY1to4laTJanm93kOKeqpWEfNObaKmLckq6+/dJIW97S2YptsDn1FpfcW04Mfw+uWVmhnJiTf4jnUlB4aurHo/vWSj7noBwoySa2B1sUuvVt9Dg14fpS1663YHgmDbk9L1Smefd2+2C0eT/n5LPpbX/0RWLTU3RC39ncu8XHpHCtjLTkcl64xEmxWuP6c7N4Ea3u6rc9TGcwNPdiwQhdXJOtgLioeZWWa89QwEr1PgtdE85r7k31Mbd78GKiYDRnMLpgwfByslitmM7dcZ9bXwchFavItl5+TzBqW+xIUT0Ylg9WGd6C4btCmnWI6K9cyrE71kgpncKhS96CMf3cNF5E1VG3XvnwHIz1CIa+x6tSJAud7592oeqNskdr5LcEw3RWPI5gPKdJs8ZJ4VquwYvVm0Py9u9JE6PZqDaGL/aMOU9VpWO8zub99Kihuy2Z3xiMdFWT+SytwQ8eWgqqvWm5VsNVcV21k5bWR+ultfuR//7FlPTju0PX4CeH8HaMOnYI+9L0Wh7NUXHd4Gkye93V5T81gZdq7SFLIVFW7F5ZNEnPh78P2Dq6d+H9UdOe0KonS3/tv/emojD7PuE3WNOzU0Sf9cw2PHbKc+hsz2b9o5zoecQS5Hp+2z/9AzdSuqVE3z+DprbO8bjtbWztdPVhsJ7NytAej6f7uG1jzPZuQwk2aXT89//9azX+tuZ4XWOF8oxL2PPjLc6DnTrjES6ljL3a2by/Wm++/0PrXrpuu15EzGtXjnZSf/lk2S8acb4i3N6a+lC6dXgefTvprBRHu3n8oPlqdHoMTu9G335dAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwLX8ARKkWGQWd8ZIAAAAASUVORK5CYII=">
      </div>
    </div>
  </div>
</a>

<a href="http://google.com">
<div class='col nopadding col12-12 counter'>
    <div class='col col6-12 vheight'>
      <h2>placeholder</h2>
      <p>placeholder</p>
    </div>
    <div class='col col6-12 nopadding varheight '>
      <div class='imagewrapper'>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAAC8CAMAAAC672BgAAAANlBMVEXMzMyUlJTPz8/KysqSkpKdnZ2mpqahoaHIyMi5ubmXl5eZmZnCwsK0tLSxsbGioqKsrKy+vr7uUNzyAAADSklEQVR4nO3YW1PkIBCGYSCEnMjp///Z/bqTOK6jF1ZNrRX3fS6UQaLSoWmSEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+E+l9K6ZPh/xne67aQbn7bpsw9U9b3P/PLpXdz3bu1/YH7/k09G3U3OMMUfd2LRba/XeflJ7eppfHdUdB18FTetXVm+qNdaPo+9niGMrml+jAGhWi021eLP7sPZTF8cyxdE/KF66blII0uajp9tnSppzSUfGDzHuaY1to4laTJanm93kOKeqpWEfNObaKmLckq6+/dJIW97S2YptsDn1FpfcW04Mfw+uWVmhnJiTf4jnUlB4aurHo/vWSj7noBwoySa2B1sUuvVt9Dg14fpS1663YHgmDbk9L1Smefd2+2C0eT/n5LPpbX/0RWLTU3RC39ncu8XHpHCtjLTkcl64xEmxWuP6c7N4Ea3u6rc9TGcwNPdiwQhdXJOtgLioeZWWa89QwEr1PgtdE85r7k31Mbd78GKiYDRnMLpgwfByslitmM7dcZ9bXwchFavItl5+TzBqW+xIUT0Ylg9WGd6C4btCmnWI6K9cyrE71kgpncKhS96CMf3cNF5E1VG3XvnwHIz1CIa+x6tSJAud7592oeqNskdr5LcEw3RWPI5gPKdJs8ZJ4VquwYvVm0Py9u9JE6PZqDaGL/aMOU9VpWO8zub99Kihuy2Z3xiMdFWT+SytwQ8eWgqqvWm5VsNVcV21k5bWR+ultfuR//7FlPTju0PX4CeH8HaMOnYI+9L0Wh7NUXHd4Gkye93V5T81gZdq7SFLIVFW7F5ZNEnPh78P2Dq6d+H9UdOe0KonS3/tv/emojD7PuE3WNOzU0Sf9cw2PHbKc+hsz2b9o5zoecQS5Hp+2z/9AzdSuqVE3z+DprbO8bjtbWztdPVhsJ7NytAej6f7uG1jzPZuQwk2aXT89//9azX+tuZ4XWOF8oxL2PPjLc6DnTrjES6ljL3a2by/Wm++/0PrXrpuu15EzGtXjnZSf/lk2S8acb4i3N6a+lC6dXgefTvprBRHu3n8oPlqdHoMTu9G335dAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwLX8ARKkWGQWd8ZIAAAAASUVORK5CYII=">
      </div>
    </div>
  </div>
</a>

Answer 2

你通过 find 选择了错误的元素，试试这个：

$(window).resize(function () {
  $( ".counter" ).each(function() {
    var $counter = $('.vheight', this).outerHeight(true);
    $('.vheight', this).css("height", $counter);
  });
});

在加载函数上做同样的选择 => $('your next element', this)

Answer 3

使用 find() 代替 next()

$( ".counter" ).each(function() {
    var $counter = $(this).find('.vheight').outerHeight(true);
    $(this).find(".varheight").css("height", $counter);
});