jQuery -获取元素的高度，并将该高度应用于同一父元素内的另一个元素。

Question

这里有一个小提琴- https://jsfiddle.net/t6tpxqco/18/

我要做的是抓取元素" .right“的高度，并将内联样式应用于".left”，该样式与jQuery抓取的.right的高度相匹配：

<li class="first">
  <div class="left"></div>
  <div class="right">
  <h1>Bear claw bear claw biscuit biscuit.</h1>
    <p class="nfo">Bear claw bear claw biscuit biscuit bonbon candy canes chocolate chocolate cake gingerbread. Gummies chocolate bar dragée tootsie roll. Chocolate bar sweet roll oat cake bear claw dragée chocolate bar chocolate bar.</p>
    <a href="" class="readMore">Read More</a>
  </div>
</li>

<li class="second">
  <div class="left"></div>
  <div class="right">
    <h1>Chocolate bar sweet roll oat cake bear claw dragée</h1>
    <p class="nfo">Bear claw bear claw biscuit biscuit bonbon candy canes chocolate chocolate cake gingerbread. Gummies chocolate bar dragée tootsie roll. Chocolate bar sweet roll oat cake bear claw dragée chocolate bar chocolate bar.Pudding chupa chups soufflé sweet roll jelly jujubes cake chocolate cake. Tiramisu gummies pastry donut caramels. Tart pastry liquorice tiramisu.</p>
    <a href="" class="readMore">Read More</a>
  </div>
</li>

下面是我使用的jQuery代码：

var pressHeight = $('.right').height();
$('.left').css({
    height: pressHeight
})

所以问题是，它显然获取了.right元素在.first列表项中的高度，并将该高度应用于所有.left元素。

但是如果你看一下小提琴，每个.right元素的大小是不同的。我需要做的是将.left(图片)元素的高度与其在同一个父列表项中的各自的.right元素匹配。

因此，为了简化，我需要在每个列表项目中的图片，以匹配其右侧的内容高度。

我该怎么做呢。

注意:这是通过WordPress循环生成的内容，所以我不能将ID添加到列表项中。

Answer 1

试着分别处理每个元素：

$('.left').each(function() {
   var $r = $(this).siblings('.right').first();
   var h = $r.height();
   $(this).css({
       height: h
   });
});

这段代码所做的是遍历所有.left元素。对于每个类，它都通过使用.right查找类.siblings('.right')的同级。为了安全起见，我包括了一个.first()，尽管我不希望有多个.right兄弟姐妹。

Answer 2

只需遍历每个.right类，如下所示：

$(".right").each(function() {
  var rightHeight =  $(this).height();
  $(this).prev().css("height",rightHeight);
});

获取每个.right元素的高度，然后将高度应用到.left的css以表示高度。

查看结果这里。

Answer 3

是的，你需要在下面这样的项目中找到答案：

     $(document).ready(function(){

        var rightElem = $('.right');

         rightElem.each(function() {
           var that = $(this),
               height = that.outerHeight(),
                left = that.siblings('.left');
            left.css({'height': height})
          });

        });