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

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

但是如果你看一下小提琴，每个.right元素的大小都不同。我需要做的是将.left（picture）元素的高度与相同父列表项中相应的.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的高度。

查看结果here。

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})
          });

        });

Answer 4

更好的是，你不再需要JavaScript（或jQuery，就此而言）！

在您的CSS中，将<li>元素设置为display: flex（此外，现在您的.left和.right div不再需要浮动）看看flexbox的神奇之处。

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

4 个答案: