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' s并影响其他元素。

我在这里循环浏览.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>

Answer 2

您正走在正确的轨道上 - 问题确实与您的.text选择器的特殊性有关。您希望对其进行范围调整，以便仅使用与图像相邻的.text，而不仅仅是页面上的第一个.text。

＆＃13;

$('.container').each(function(index, element) {

  var $this = $(element),
    $img = $this.find('img'),
    $text = $this.find('.text')[0];
  // we use [0] because $.find returns a collection of elements
  // even if there's only one .text in the .container,
  // and we can't get clientHeight from a collection.
  // it's fine to leave $img as is because $.css
  // works with collections _or_ single elements.

  // then it's as simple as...
  $img.css('height', $text.clientHeight);
});

＆＃13;

div.container {
  border: 1px solid;
  margin-bottom: 30px;
  /* this line clears your floats;
     they'll run into each other without it.
     or you can use a clearfix - google for examples. */
  overflow: hidden;
}

img {
  float: left;
}

＆＃13;

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

＆＃13;

多个图像只获得第一个div的高度

2 个答案: