Question

我正在使用jQuery脚本（下面）获取一个div的高度并将其应用于旁边的一个div。它工作得非常好，但是如果我有另一行内部具有相同的.app-screenshot类，它有不同的高度，那就错了。

如何让 .app-screenshot-description 类获得最接近 .app-screenshot 班级高度的高度？

＆＃13;

function getImgHeight() {
    var divHeight = $('.app-screenshot').height(); 
    $('.app-screenshot-description').css('height', divHeight+'px');
}

＆＃13;

<div class="row">
<div class="app-screenshot">This divs height is 690px</div>
<div class="app-screenshot-description">Second div</div>
</div>

<div class="row">
<div class="app-screenshot">This divs height is 540px</div>
<div class="app-screenshot-description">Second div</div>
</div>

＆＃13;

Answer 1

假设您的html结构遵循此模式

<div class="row">
 <div class="app-screenshot"></div>
 <div class="app-screenshot-description"></div>
</div>

你可以尝试这样的事情。

$('.row').each(function(){
     var divHeight = $(this).find('.app-screenshot').height(); 
    $(this).find('.app-screenshot-description').css('height', divHeight+'px');
});

你可以使用最接近和评论中提到的，但如果每个div的高度不同，你仍然需要使用每个div循环它们

Answer 2

搜索具有共同Y坐标的div：

function getImgHeight() {
$('.app-screenshot').each(function(){
    var divHeight = $(this).height();
    var divPosition = $(this).offset().top;
    $('.app-screenshot-description').each(function(){
        if($(this).offset().top == divPosition)
        {
            /*console.log($(this).offset().top);*/
            $(this).css('height', divHeight+'px');
        }
    });
});

}

Answer 3

你没有说你的函数何时应该运行，但如果你遍历行，它可以工作：

$(".row").each(function(index, row){
  $(row).find(".app-screenshot-description").css("height", $(row).find(".app-screenshot").css("height"));
});

.row { border:1px solid black;}

.row > div { border:1px dashed red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="app-screenshot" style="height:100px">This divs height is 100px</div>
  <div class="app-screenshot-description">Second div</div>
</div>

<div class="row">
  <div class="app-screenshot" style="height:25px">This divs height is 25px</div>
  <div class="app-screenshot-description">Second div</div>
</div>

Answer 4

虽然你在写这个答案时已经接受了你的问题的另一个答案，但我想我会花点时间提供一个进一步的答案，希望能提供一些可能对你有用的其他选择。特别是因为我在这里提供的解决方案不需要使用JavaScript（尽管我使用jQuery来演示这些解决方案的功能）。

有三种明显的方法可以在纯CSS中实现所需的功能;在这个答案中，我将按照（个人）偏好的顺序浏览这些选项。

1：flexbox。

这种方法利用了这样一个事实：flexbox将其子项目的大小设置为相同的横轴尺寸（如果内容排成一行，那么横轴尺寸将是高度，如果排列在列中横轴尺寸为宽度）。

// This is purely to demonstrate that both elements take
// the same height (that of the 'tallest' sibling.

// binding the anonymous function of the on() method as
// the event-handler for the 'click' event:
$('#resizeHeight').on('click', function() {

  // selecting all elements matching the selector,
  // and using the css() method's anonymous function
  // to style each '.app-screenshot' element
  // independently:
  $('.app-screenshot').css('height', function() {

    // generating a random height up to a maximum of 500px:
    let newHeight = Math.floor(Math.random() * 500);

    // setting the height of the current element:
    this.style.height = newHeight + 'px';
    // setting the text of the current element:
    this.textContent = newHeight;
  });
// triggering the click event on page-load in order
// the elements have a randomly-assigned size on
// page-load:
}).click();

body {
  padding-top: 3em;
}

#control {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5em;
  text-align: center;
}

.row {
  /* setting the display to use the
     flexbox layout: */
  display: flex;
  margin-bottom: 1em;
}

.row>div {
  /* setting the flex-grow and flex-shrink
     to be 1, and the flex-basis to be auto: */
  flex: 1 1 auto;
}

/* Everything below is either for aesthetics
   or simple visibility: */
.app-screenshot {
  background-color: fuchsia;
}

.app-screenshot-description {
  background-color: silver;
}

.app-screenshot::before {
  content: "This element's height is: ";
}

.app-screenshot::after {
  content: 'px.';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
  <button id="resizeHeight">Randomise height of '.app-screenshot' elements</button>
</div>
<div class="row">
  <div class="app-screenshot"></div>
  <div class="app-screenshot-description">Second div</div>
</div>

<div class="row">
  <div class="app-screenshot"></div>
  <div class="app-screenshot-description">Second div</div>
</div>

2。 CSS网格。

// This is purely to demonstrate that both elements take
// the same height (that of the 'tallest' sibling.

// binding the anonymous function of the on() method as
// the event-handler for the 'click' event:
$('#resizeHeight').on('click', function() {

  // selecting all elements matching the selector,
  // and using the css() method's anonymous function
  // to style each '.app-screenshot' element
  // independently:
  $('.app-screenshot').css('height', function() {

    // generating a random height up to a maximum of 500px:
    let newHeight = Math.floor(Math.random() * 500);

    // setting the height of the current element:
    this.style.height = newHeight + 'px';
    // setting the text of the current element:
    this.textContent = newHeight;
  });
  // triggering the click event on page-load in order
  // the elements have a randomly-assigned size on
  // page-load:
}).click();

body {
  /* Setting the display to use CSS grid layout: */
  display: grid;

  /* specifying the number of rows, to:
     row 1: 3em high,
     row 2: min-content,
     row 3: min-content.
     'min-content' directs the row to be the
     smallest practicable size that will still
     fully contain the content of the elements
     in that row, and because the elements take
     up the whole of the allocated space those
     elements are of equal height: */
  grid-template-rows: 3em min-content min-content;
}

.row {
  /* setting the display of the .row elements
     to also use grid layout: */
  display: grid;

  /* setting both columns to be 1 fractional unit
     therefore both columns will be the same size;
     this can, of course, be adjusted to taste
     using any valid CSS grid length unit: */
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1em;
}

.app-screenshot {
  /* Assigning the .app-screenshot element(s) to
     be positioned in the first column of its
     parent: */
  grid-column: 1;
  background-color: fuchsia;
}

.app-screenshot-description {
  /* Assigning the .app-screenshot-description
     element(s) to be positioned in the second
     column of its parent: */
  grid-column: 2;
  background-color: silver;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
  <button id="resizeHeight">Randomise height of '.app-screenshot' elements</button>
</div>
<div class="row">
  <div class="app-screenshot"></div>
  <div class="app-screenshot-description">Second div</div>
</div>

<div class="row">
  <div class="app-screenshot"></div>
  <div class="app-screenshot-description">Second div</div>
</div>

3。 CSS表格。

理想情况下，这不会被使用 - 这是一个纯粹的个人观点 - 由于布局原因而感觉太靠近使用<table>元素，而我们没有使用<table>元素我们纯粹是出于布局原因而使用它。对我来说仍然感觉很脏。但是，这是一个可以使用的选项。

虽然我倾向于避免这种解决方案，但它确实具有简单的潜在优势，尽管有相关的“气味”，并且利用了表格单元的父表行 - 由其后代的“最高”定义。

// This is purely to demonstrate that both elements take
// the same height (that of the 'tallest' sibling.

// binding the anonymous function of the on() method as
// the event-handler for the 'click' event:
$('#resizeHeight').on('click', function() {

  // selecting all elements matching the selector,
  // and using the css() method's anonymous function
  // to style each '.app-screenshot' element
  // independently:
  $('.app-screenshot').css('height', function() {

    // generating a random height up to a maximum of 500px:
    let newHeight = Math.floor(Math.random() * 500);

    // setting the height of the current element:
    this.style.height = newHeight + 'px';
    // setting the text of the current element:
    this.textContent = newHeight;
  });
  // triggering the click event on page-load in order
  // the elements have a randomly-assigned size on
  // page-load:
}).click();

.row {
  /* forcing the '.row' element(s) to display
     as a table-row: */
  display: table-row;
}

.app-screenshot,
.app-screenshot-description {
  /* forcing the selected elements to display
     as table-cells: */
  display: table-cell;
  width: 50vw;
  /* emulating the margin-bottom of previous
     demos in this answer: */
  border-bottom: 1em solid #fff;
}

.app-screenshot {
  background-color: fuchsia;
}

.app-screenshot-description {
  background-color: silver;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
  <button id="resizeHeight">Randomise height of '.app-screenshot' elements</button>
</div>
<div class="row">
  <div class="app-screenshot"></div>
  <div class="app-screenshot-description">Second div</div>
</div>

<div class="row">
  <div class="app-screenshot"></div>
  <div class="app-screenshot-description">Second div</div>
</div>

请注意，虽然我已经使用jQuery来调整.app-screenshot元素的大小，但实现这些发布的解决方案并不需要jQuery或任何JavaSCript，它纯粹用于演示功能解决方案。

jQuery最近div的复制高度

4 个答案:

1：flexbox。

2。 CSS网格。

3。 CSS表格。