jquery - 多图只获取第一个div的高度

Question

我有 3 张图片，每张图片后面都有一个 div。我正在尝试将所有图像的高度调整为与其后的 div 的高度相同。

但是，所有图像的高度都是第一个 div 的高度，而不是后面那个。

我相信这是因为当$(".text").outerHeight()使用时，它总是获得第一个 <div class="text"> 的高度.我试过使用这个 .each功能来解决这个问题，但无济于事:

$('.container').each(function(i, obj) {
   $(".container").find('img').css("height", $(".text").outerHeight());
});

这是我没有 .each 的完整代码功能:

$(".container").find('img').css("height", $(".text").outerHeight());

div.container {
  border: 1px solid;
  margin-bottom: 30px;
}

img {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED" />
  <div class="text">
    <h2>Red</h2>
    <p>When his peaceful life is threatened by a high-tech assassin, .</p>
  </div>
</div>

<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTAyNzQyNTcwNjVeQTJeQWpwZ15BbWU3MDAwOTQ4Nzk@._V1_SX300.jpg" alt="White House Down" />
  <div class="text">
    <h2>White House Down (2013)</h2>
    <p>While on a tour of the White House with his young daughter, a Capitol policeman springs into action to save his child and protect the president from a heavily armed group of paramilitary invaders.</p>
  </div>
</div>

<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTAyNzQyNTcwNjVeQTJeQWpwZ15BbWU3MDAwOTQ4Nzk@._V1_SX300.jpg" alt="White House Down" />
  <div class="text">
    <h2>White House Down (2013)</h2>
    <p>While on a tour of the White House with his young daughter, a Capitol policeman springs into action to save his child and protect the president from a heavily armed group of paramilitary invaders.</p>
  </div>
</div>

Answer 1

你要么想遍历所有 .containers 并以 .text 和 img 为目标，要么遍历所有 img 或 .text 并影响其他元素。

我在这里遍历 .text 并更新它之前的 img。

$('.text').each(function() {
  $(this).prev('img').css('height',$(this).outerHeight());
})

div.container {
  border: 1px solid;
  margin-bottom: 30px;
}
img {
  float: left;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED" />
  <div class="text">
    <h2>Red</h2>
    <p>When his peaceful life is threatened by a high-tech assassin, .</p>
  </div>
</div>

<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTAyNzQyNTcwNjVeQTJeQWpwZ15BbWU3MDAwOTQ4Nzk@._V1_SX300.jpg" alt="White House Down" />
  <div class="text">
    <h2>White House Down (2013)</h2>
    <p>While on a tour of the White House with his young daughter, a Capitol policeman springs into action to save his child and protect the president from a heavily armed group of paramilitary invaders.</p>
  </div>
</div>

<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTAyNzQyNTcwNjVeQTJeQWpwZ15BbWU3MDAwOTQ4Nzk@._V1_SX300.jpg" alt="White House Down" />
  <div class="text">
    <h2>White House Down (2013)</h2>
    <p>While on a tour of the White House with his young daughter, a Capitol policeman springs into action to save his child and protect the president from a heavily armed group of paramilitary invaders.</p>
  </div>
</div>