如何选择每个班级实例的后代？

Question

这是我的代码的简化版本。

<div class="row">
    <div class="column">

    </div>
    <div class="column">

    </div>
</div>
<div class="row">
    <div class="column">

    </div>
</div>
<div class="row">
    <div class="column">

    </div>
    <div class="column">

    </div>
    <div class="column">

    </div>
</div>

我正在尝试在每个“行”DIV中添加每个“列”DIV的高度。换句话说，我想在第一个“行”DIV中添加两个“列”DIV;第二个“行”DIV中的一个“列”DIV;和第三个“行”DIV中的三个“列”DIV。我怎么能这样做？

Answer 1

如果我理解你的要求......

// Loop through each .row...
$('.row').each(function(i) {
  var totalHeight = 0;

  // Loop though descendant .column's in this .row...
  $(this).find('.column').each(function() {

    // Add .column height to total...
    totalHeight += $(this).height();
  })

  // do something with the total...
  console.log('columns in row ' + i + ' have a total height of ' + totalHeight + 'px');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="row">
  <div class="column">
    Column
  </div>
  <div class="column">
    Column
  </div>
</div>
<div class="row">
  <div class="column">
    Column
  </div>
</div>
<div class="row">
  <div class="column">
    Column
  </div>
  <div class="column">
    Column
  </div>
  <div class="column">
    Column
  </div>
</div>

Answer 2

（点击run code snippet查看工作示例）;

function SetColumnHeightCtrl($) {
  var rows = $('.row');
  
  rows.each(function(index) {
    var height = 0;
    var $row = $(this);
    
    $row.find('.column').each(function() {
      var $column = $(this);
      height += $column.height();
    });
    
    console.log(`${index} row height:`, height);
    $row.css('height', height);
  });

}
jQuery(document).ready(SetColumnHeightCtrl);

.row { background: lightseagreen; display: flex; padding: 5px; margin-bottom: 1em; }

.column { background: lightcoral; margin: 0 5px; flex: 1 1 auto; }

.column:nth-child(odd) { height: 30px; }
.column:nth-child(even) { height: 70px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="row">
    <div class="column"></div>
</div>
<div class="row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

Answer 3

一个简单的$("div.row>div.column")足以选择使用div with class column div with class row内的每个.height()来计算当前的高度。

代码：

$("div.row>div.column").each(function() {
   sum += ($(this).height());
});

＆＃13;

＆＃13;

$(function() {
  console.log(calc());
});

function calc() {
  var sum = 0;
  $("div.row>div.column").each(function() {
    sum += ($(this).height());
  });
  return sum;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1
<div class="row">
  a
  <div class="column">
    b
  </div>
  <div class="column">
    c
  </div>
  d
</div>
2
<div class="row">
  e
  <div class="column">
    f
  </div>
  g
</div>
3
<div class="row">
  h
  <div class="column">
    i
  </div>
  j
  <div class="column">
    k
  </div>
  l
  <div class="column">
    m
  </div>
  n
</div>
4

＆＃13;

＆＃13;

＆＃13;

Answer 4

$(document).ready(function() {
	var height = 0;

	$('.row').children('.column').each(function() {
	    height += $(this).height();
	});

	console.log(height);
});

.column {
    height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="column">

    </div>
    <div class="column">

    </div>
</div>
<div class="row">
    <div class="column">

    </div>
</div>
<div class="row">
    <div class="column">

    </div>
    <div class="column">

    </div>
    <div class="column">

    </div>
</div>

返回1800